anglejsのアイテムごとにボタンを無効または有効にします

私は参加者のリストを持っています。各参加者にはダイヤルボタンとミュートボタンがあります。最初にミュートボタンを無効にし、ダイヤルボタンをクリックした後で有効にします。現在、参加者1のダイヤルボタンをクリックすると、他の参加者のすべてのミュートボタンが有効になります。anglejsのアイテムごとにボタンを無効または有効にします

<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は、各反復アイテムごと、自身の子スコープを作成しますので、あなたが設定することができますが、私は唯一の参加者のミュートボタンを1

HTMLを有効にしますその範囲に限定されるビュー内の変数：

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

また、01 trのは役に立たない。それを除く。あなたは、変数をより細かく制御する必要がある場合（それが呼び出す行うの時に、あなたのモデルにプロパティを追加し、それトグルする必要があり、それを再度有効にしたい）：

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

出典

2016-11-17 14:33:52 tymeJV

anglejsのアイテムごとにボタンを無効または有効にします

答えて

関連する問題