我正在将JSON加载到表中。我希望我的"编辑"按钮编辑一行，我的"编辑选定"仅编辑那些选中的行，但我无法弄清楚。我只设法让它一次编辑所有行。
example.json
{
"example": [
{
"first": "something1",
"second": "one"
},
{
"first": "something2",
"second": "two"
},
{
"first": "something3",
"second": "three"
},
{
"first": "something4",
"second": "four"
}
]
}
index.htm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="newApp" ng-controller="newCtrl">
<h1>
<button ng-click="showFunc()">Edit selected</button>
</h1>
<table>
<tr>
<th></th>
<th>Index</th>
<th>First </th>
<th>Second</th>
<th>Edit</th>
</tr>
<tr ng-repeat="iterator in newData.example" ng-show="show">
<td>
<input type="checkbox" />
</td>
<td>{{$index + 1}}</td>
<td>
<input ng-model="iterator.first">
</td>
<td>
<input ng-model="iterator.second">
</td>
<td>
<button ng-click="showFunc()">Save</button>
</td>
</tr>
<tr ng-repeat="iterator in newData.example" ng-show="!show">
<td>
<input type="checkbox" />
</td>
<td>{{$index + 1}}</td>
<td>{{iterator.first}}</td>
<td>{{iterator.second}}</td>
<td>
<button ng-click="showFunc()">Edit</button>
</td>
</tr>
</table>
<script>
var app = angular.module('newApp', []);
app.controller('newCtrl', function ($scope, $http) {
$http.get("example.json")
.then(function (response) {
$scope.newData = response.data;
});
$scope.show = false;
$scope.showFunc = function (index) {
$scope.show = !$scope.show;
}
});
</script>
</body>
</html>
您需要为每个iterator提供一个 show 变量。正如现在编码的那样，您有一个控制所有行的视图状态的单个变量。这在逻辑上有意义吗？不。
获取每行show变量的最简单方法是在迭代器本身上创建对它的引用：
<tr ng-repeat="iterator in newData.example" ng-show="iterator.show">
...
<td>
<button ng-click="showFunc(iterator)">Save</button>
</td>
</tr>
<tr ng-repeat="iterator in newData.example" ng-show="!iterator.show">
...
<td>
<button ng-click="showFunc(iterator)">Edit</button>
</td>
</tr>
由于它最初是undefined因此将被视为 falsey，并且该行将以非编辑状态显示。
然后在控制器中确保设置了单个 show 变量：
$scope.showFunc = function (iterator) {
iterator.show = !iterator.show;
}
若要选择多行，请遵循相同的模式。通过在复选框中引用 selected 属性来添加该属性：
<input type="checkbox" ng-model="iterator.selected"/>
每次单击该复选框时，iterator.selected都会自动更新。
现在，在这里，我假设您在页面上的某个地方有一个全局Edit Selected按钮：
<button type="button" ng-click="editSelected()">Edit Selected</button>
现在，在您的控制器中，您必须做一些工作来仅在列表中selected为 true 的项上设置 show 变量：
$scope.editSelected() = function() {
$scope.newData.example.filter(function(iterator) {
return iterator.selected;
}).forEach(function(item) {
item.show = true;
});
}
如果您不认识这种过滤模式，请务必阅读 MDN 文档网站上的数组文档。