Question

我有一份参与者名单。每个参与者都有拨号和静音按钮。我想先禁用静音按钮，然后仅在单击拨号按钮后启用它。目前，如果我点击说参与者1的拨号按钮，则其他参与者的所有静音按钮都会启用。但我想启用只有参与者1的静音按钮。

HTML：

  <body ng-controller="MainCtrl">
   <table>
    <tr ng-model="participant.partName" ng-repeat="participant in participants">
      <td>{{participant.partName}}</td>
      <td>
       <button ng-click="mutePart(participant.partName);">Mute</button>
      </td>

      <td>
       <button ng-click="dial(participant.partName)">Dial</button>
      </td>
   </tr>
  </table>
 </body>

JS：

 $scope.participants = [
{
  partName: 'abc',
  partId: '123'
},
{
  partName: 'def',
  partId: '1234'
},
{
  partName: 'xyz',
  partId: '12345'
},
]
   $scope.mutePart = function(item){

  }
 $scope.dial = function(item){

 }

Answer 1

由于ngRepeat将为每个迭代项创建自己的子范围，因此您可以在视图中设置一个仅限于该范围的变量：

<tr ng-repeat="participant in participants">
  <td>{{participant.partName}}</td>
  <td>
   <button ng-disabled="!isDialing" ng-click="mutePart(participant.partName);">Mute</button>
  </td>

  <td>
   <button ng-click="isDialing = true; dial(participant.partName)">Dial</button>
  </td>
</tr>

此外，ngModel上的tr无用。去掉它。如果您需要对变量进行更多控制（比如在完成调用时重新启用它，则应该为模型添加属性并切换它）：

{
    partName: 'abc',
    partId: '123',
    isDialing: false //Added property, now toggle this
}

Answer 2

<body ng-controller="MainCtrl">
   <table>
    <tr ng-model="participant.partName" ng-repeat="participant in participants">
      <td>{{participant.partName}}</td>
      <td>
       <button ng-disabled="!callSessions[$index]" ng-click="mutePart(participant.partName);">Mute</button>
      </td>

      <td>
       <button ng-click="dial(participant.partName, $index)">Dial</button>
      </td>
   </tr>
  </table>
 </body>

控制器：

$scope.callSessions= {};
$scope.dial = function(name, index){
    $scope.callSessions[index] = true;
}

在angularjs中禁用或启用每个项目的按钮

2 个答案: