0

我需要实现按钮的切换。在这里，我从 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;
};
4

2 回答 2

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>
于 2013-10-07T11:56:09.793 回答
1

另一种选择：

<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;
};
于 2013-10-07T12:04:04.067 回答