javascript - 如何通过在angular js中选择表格行来禁用两个按钮中的一个按钮？

Question

我有两个按钮:激活和暂停。我希望在选择表格行时禁用其中一个按钮。

在 HTML 中:

<div class="pull-right">
  <button ng-disabled ="orders.status == pause" id = "activated" class="pull-left btn btn-primary">Activated</button>
  <button ng-disabled ="orders.status == activated" id = "paused" class="pull-left btn btn-primary">Paused</button>
</div>
<br/>
<br/>
<table class="table table-color table-bordered table-hover">
  <thead>
    <tr>
      <th>
        Rotation Order
      </th>
      <th>
        Tag Name
      </th>
      <th>
        Status
      </th>
    </tr>
  </thead>


<tbody>
    <tr ng-repeat="orders in  vm.rotationTable" ng-class="{selected : orders.rotationOrder == vm.idSelectedOrder}" ng-click="vm.setSelected(orders.rotationOrder)">
      <td>{{orders.rotationOrder}}</td>
      <td>{{orders.tagName}}</td>
      <td>{{orders.status}}</td>
    </tr>
  </tbody>
</table>

在 JScript 中:

// Code goes here

var myApp = angular.module('myApp',[]);
  myApp.controller('tagController', ['$scope',function ($scope) {

  var vm = this;
  vm.rotationTable = [
      {
          "rotationOrder": "1",
          "tagName": "Tag D",
          "status":"Activated"
      },
      {
          "rotationOrder": "2",
          "tagName": "Tag E",
          "status": "Paused"
      },
      {
          "rotationOrder": "3",
          "tagName": "Tag F",
          "status": "Activated"
      }
  ]

  vm.idSelectedOrder = null;
  vm.setSelected = function (index) {
      vm.idSelectedOrder = index;
      console.log(vm.idSelectedOrder);
  };
 }]);

你可以在这里看到我的作品。

http://plnkr.co/edit/UiMhLbzhxg3I5cGuiK0J?p=preview

而且如果有人可以建议:- 如何修复表行已被选中时的悬停？我不希望悬停效果已被选中。

Answer 1

将您的 ng-click 更改为

ng-click="vm.setSelected(orders)"

而不是存储 vm.idSelectedOrder，而是存储实际订单。为 Controller 创建一个 vm.selectedOrder 变量。

在您的按钮中，您将使用:

ng-disabled ="vm.selectedOrder.status == 'Paused'"

这是 plunk .