javascript - AngularJS - 无法使用指令引用 ng-model 内的 $index

Question

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

问题摘要；

Every time I try and reference the $index tracker, I get an undefined error in my directive code.

Answer 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