Вам нужна переменная show для каждого iterator
. Теперь, когда она закодирована, у вас есть одна переменная, которая управляет состоянием представления для всех строк. Это имеет логический смысл? Нет.
Самый простой способ получить 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
, оно будет рассматриваться как ложное, и строка будет отображаться в состоянии без редактирования.
Затем в вашем контроллере убедитесь, что вы устанавливаете индивидуальную переменную 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>
Теперь в вашем контроллере вам нужно будет поработать, чтобы установить переменную show
только для элементов в списке, где selected
имеет значение true:
$scope.editSelected() = function() {
$scope.newData.example.filter(function(iterator) {
return iterator.selected;
}).forEach(function(item) {
item.show = true;
});
}
Если вы не распознаете этот шаблон фильтрации, обязательно прочитайте документацию Array на веб-сайте документации MDN .