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

別の方法:

<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 に答える