Anuja Patil Anuja Patil - 16 days ago 6
AngularJS Question

Disable or enable button per item in angularjs

I have a list of participants. Each participant have dial and mute buttons. I want to disable mute button at first and enable it only after dial button is clicked. Currently, if I click on dial button of say Participant 1, all the mute buttons of other participants enables. But I want to enable mute button of only Participant 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
<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>

controller:

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