访问ng-repeat的项目范围

Question

我有一个表格，其行使用各自的范围变量进行条件渲染：

<tr ng-repeat="row in data">
  <input type="text" data-ng-show="editMode" data-ng-model="row.smth"/>

这样只有在行范围变量editMode设置为true时才显示输入，它完全正常。

现在我想动态添加另一行：

$scope.data.push(my_new_row)

这也很有效。但是，我想将新行的范围变量editMode设置为某种东西，而且我没有想法。

我知道有一种无证的方式可以使用$$ childHead等，但这并不是很优雅。

Answer 1

您可以使用$ index跟踪项目。您还可以使用索引来决定显示/隐藏项目。您可以通过使用show / hide逻辑实现一个函数并传入索引来完成此操作。例如：

<div ng-repeat="row in data track by $index">
    <input type="text" data-ng-show="GetEditMode($index)" ng-model="row.smth[$index]">
</div>

查看this。

Answer 2

您可以在行数据中设置编辑模式。

<input type="text" data-ng-show="row.editMode" data-ng-model="row.smth"/>

或

你可以试试这个：

<input type="text" data-ng-show="this.editMode" ng-change="toggle(this);" data-ng-model="row.smth"/>

在Controller中，您可以访问editMode：

$scope.toggle = function(context){
        console.log(a);
        context.editMode=!context.editMode;
}