AngularJS - 不能使用指令在ng-model中引用$ index

时间:2016-02-26 07:40:05

标签: javascript angularjs json angularjs-ng-repeat angular-directive

我目前正面临一个问题,我希望生成一个动态数量的输入表单,并动态命名它们(由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>

使用指令&amp; $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跟踪器时,我都会得到一个   我的指令代码中的未定义错误。

1 个答案:

答案 0 :(得分: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