AngularJS - 无法使用指令在 ng-model 中引用 $index

Posted

技术标签:

【中文标题】AngularJS - 无法使用指令在 ng-model 中引用 $index【英文标题】:AngularJS - cannot reference $index inside ng-model using a directive 【发布时间】:2016-06-09 08:05:33 【问题描述】:

我目前面临一个问题,我想生成动态数量的输入表单并动态命名它们(由 JSON 定义),以便我可以单独引用它们。

例如,如果我的 JSON 对象中有三个项目,我将生成三个输入框,分别为 ng-model="1"ng-model="2"ng-model="3"。在现实生活中,ID 将来自 JSON 本身。

我目前正在使用ng-repeat 在表格中生成表单;

<tr ng-repeat="x in names track by $index">
<td> $index </td> <!-- this outputs fine  -->
<td> x.Description </td>
<td> x.Metric </td>
</tr>

并使用指令和$compile 函数动态生成具有唯一ng-model 名称的输入表单。

app.directive("outDynamic", function($compile)
return
    link: function(scope, element, attrs)
        var template = "<input type='number' ng-model='" + scope.ray[attrs.element1] + "'>";
        var linkFn = $compile(template);
        var content = linkFn(scope);
        element.append(content);
    
 );

但是:以下都不起作用(嵌套在 ng-repeat 中时)

    <!-- None of these work -->
<td out-dynamic element1=$index></td>
<td out-dynamic element1="$index"></td>
<td> <input type='number' ng-model="array[$index]"> </td>
<td> <input type='number' ng-model="array['$index']"> </td>

问题摘要;

每次我尝试引用 $index 跟踪器时,我都会得到一个 我的指令代码中有未定义的错误。

【问题讨论】:

你的代码中scope.ray在哪里? 它在控制器中定义为$scope.ray = [],我没有发布整个代码以保持问题简短。 【参考方案1】:

您应该使用 为属性分配$index 值。所以使用

element1=$index 而不是element1=$index

<tr ng-repeat="x in names track by $index">
     <td out-dynamic element1=$index></td>
     <td out-dynamic element1="$index"></td>
</tr>

我猜你的scope.arr 很完美。

PLUNKER DEMO

【讨论】:

感谢您的回答!这似乎已经完成了这项工作。很奇怪,我看到的所有示例都直接在引号中引用了 $index。

以上是关于AngularJS - 无法使用指令在 ng-model 中引用 $index的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS基础语法

AngularJS - 无法使用指令在 ng-model 中引用 $index

无法使用 AngularJS 指令更改 $templateCache 中的属性

如何在AngularJS中使用pickaday指令禁用当前和未来日期

将表单传递给 AngularJS 组件进行验证

无法在 Angularjs 重复指令中显示 WEBAPI 数据