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 - 无法使用指令在 ng-model 中引用 $index
无法使用 AngularJS 指令更改 $templateCache 中的属性