在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中禁用或啓用每個項目的按鈕

回答

相關問題