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

我有一个参与者列表。每个参与者都有拨号和静音按钮。我想首先禁用静音按钮，并且只有在拨号按钮被点击后才启用它。目前，如果我点击参与者1的拨号按钮，则其他参与者的所有静音按钮都会启用。但我想只启用参与者的静音按钮1.在angularjs中禁用或启用每个项目的按钮

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){ 

}

来源

2016-11-17 Anuja Patil

<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; 
}

来源

2016-11-17 14:35:12 Amygdaloideum

我在[plunk]（https://plnkr.co/edit/QIXb271P40Rv1dIQZPbG）中收到控制台错误'callSessions is not defined'。我在这里做错了什么？ – rakemen

'$ scope.callSessions [index] = true;'从我的部分输错，抱歉。 – Amygdaloideum

很酷。字面上接受了一个可接受的答案，并忽略了这个错字。 – rakemen

由于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 
}

来源

2016-11-17 14:33:52 tymeJV

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

回答

相关问题