Question

我需要实现按钮的切换。在这里，我从json文件获取数据，使用ng-repeat填充表。现在当我点击“编辑”按钮时，表格中的所有编辑按钮都会切换到“保存”按钮。我只想切换那个特定的按钮。所以请在这个问题上提供帮助。

<tr data-ng-repeat="host in hosts|filter:search:strict" ng-switch on="editSave">
    <td>{{host.hostCd}}</td>
    <td>{{host.hostName}}</td>
    <td>
      <span ng-switch-when="false"><button style="width:50px;" class="btn btn-mini btn-warning" data-ng-click="edit()"><b>Edit</b></button></span>
      <span ng-switch-when="true"><button style="width:50px;" class="btn btn-mini btn-success" data-ng-click="save()"><b>Save</b></button></span>

      <button class="btn btn-mini btn-danger deleteRow"><b>Delete</b></button>
    </td>
</tr>

脚本

$scope.editSave = false;
$scope.edit = function() {
    $scope.editSave = true;
};
$scope.save = function() {
    $scope.editSave = false;
};

Answer 1

备选方案1：

<tr data-ng-repeat="host in hosts|filter:search:strict" ng-init="edit = true">
    <td>{{host.hostCd}}</td>
    <td>{{host.hostName}}</td>
    <td>
      <span ng-show="edit"><button style="width:50px;" class="btn btn-mini btn-warning" data-ng-click="edit = !edit"><b>Edit</b></button></span>
      <span ng-hide="edit"><button style="width:50px;" class="btn btn-mini btn-success" data-ng-click="edit = !edit"><b>Save</b></button></span>

      <button class="btn btn-mini btn-danger deleteRow"><b>Delete</b></button>
    </td>
</tr>

Answer 2

另一种选择：

<tr data-ng-repeat="host in hosts|filter:search:strict" ng-init="host.editSave = false">
    <td>{{host.hostCd}}</td>
    <td>{{host.hostName}}</td>
    <td>
      <span ng-hide="host.editSave"><button style="width:50px;" class="btn btn-mini btn-warning" data-ng-click="edit(host)"><b>Edit</b></button></span>
      <span ng-show="host.editSave"><button style="width:50px;" class="btn btn-mini btn-success" data-ng-click="save(host)"><b>Save</b></button></span>

      <button class="btn btn-mini btn-danger deleteRow"><b>Delete</b></button>
    </td>
</tr>

<强>脚本

$scope.edit = function(host) {
   host.editSave = true;
};
$scope.save = function(host) {
   host.editSave = false;
};

ng-switch表示ng-repeat表中的特定行

2 个答案: