角度ngrepeatのトグルボタン

Question

私はブートストラップのトグルボタンを作りたいと思いますが、私はいくつかの問題に直面しています。トグルボタンは表示専用ではないチェックボックスが表示され、ngRepeat指示文を削除すると、1つのボタンに対してのみ正常に機能しますが、ngRepeatを使用すると複数のボタンが必要になります。親切に私を助けてください。

<div class="box-body" ng-controller="AutomationController"> 
    <div class="table-responsive"> 
    <table class="table table-hover "> 
     <thead> 
     <tr> 
      <th>Device Name</th> 
      <th>Status</th> 
      <th>Action</th> 
      <th>Edit Device Name</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="device in devices"> 
      <td>[[device.dname]]</td> 
      <td> 
      <span ng-if="device.status===1">ON</span> 
      <span ng-if="device.status===0">OFF</span> 
      </td> 
      <td> 
      <input type="checkbox" checked data-toggle="toggle" ng-if="device.status===1"> 
      <input type="checkbox" checked data-toggle="toggle" ng-if="device.status===0"> 
      </td> 
      <td><a href="#"><i class="fa fa-pencil-square-o"></i></a></td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

Answer 1

チェックjsfiddel

you should use radio button for toggle and bind that to status column. 

Answer 2

まず第一に、あなたはとてもそれが適切にレンダリングされていない{{device.dname}}（それは意図的だったかどうかわからない）の周りに角括弧を持っています。

デバイスステータスに応じて条件付きで表示される2つのチェックボックスがあります。私はちょうど1つのチェックボックスを使用することをお勧めします。

<input type="checkbox" data-toggle="toggle" ng-model="device.status" ng-true-value="1" ng-false-value="0"> 

あなたが見ることができるように、あなたが真の値と偽の値（自分の場合は0または1である）を定義することができますし、それが表示され、適切にスコープ変数を更新します。

あなたが唯一読み取ることが彼らのために探している場合、ng-checkedディレクティブは、トリックを行うだろう：

<input type="checkbox" data-toggle="toggle" ng-checked="device.status" disabled="disabled"> 

ここでそれを試してみてください：

https://jsfiddle.net/r0m4n/ncfs6q5w/