投入陣列中的複選框值不NG-重複

Question

我有一些複選框： -

<label>CHANNELS</label> 
    <md-checkbox ng-model="channel[0]" class="md-primary md-hue-2" ng-checked="selected.indexOf(channel[0]) > -1" ng-click="toggleSelection(channel[0])" value="channel[0]">CHANNEL A</md-checkbox> 
    <md-checkbox ng-model="channel[1]" class="margin-left-1 md-primary md-hue-2" ng-checked="selected.indexOf(channel[1]) > -1" ng-click="toggleSelection(channel[1])" value="channel[1]">CHANNEL B</md-checkbox> 
    <md-checkbox ng-model="channel[2]" class="margin-left-1 md-primary md-hue-2" ng-checked="selected.indexOf(channel[2]) > -1" ng-click="toggleSelection(channel[2])" value="channel[2]">CHANNEL C</md-checkbox> 
    <md-checkbox ng-model="channel[3]" class="margin-left-1 md-primary md-hue-2" ng-checked="selected.indexOf(channel[3]) > -1" ng-click="toggleSelection(channel[3])" value="channel[3]">CHANNEL D</md-checkbox> 
    <md-checkbox ng-model="channel[4]" class="margin-left-1 md-primary md-hue-2" ng-checked="selected.indexOf(channel[4]) > -1" ng-click="toggleSelection(channel[4])" value="channel[4]">CHANNEL E</md-checkbox> 

我試圖把值在數組中。 我的指令代碼是： -

scope.channels = ['CHANNEL A','CHANNEL B','CHANNEL C','CHANNEL D','CHANNEL E']; 
        scope.selected = []; 

      scope.toggleSelection = function toggleSelection(channel) { 
       console.log(channel); 
       var idx = scope.selected.indexOf(channel); 
        console.log(idx); 
       if (idx > -1) { 
       scope.selected.splice(idx, 1); 
       } 

       else { 
       scope.selected.push(channel); 
       } 
      }; 

我知道用NG-重複它會更好地工作，但通過使用我有一些其他的CSS問題，這是很難correct.I只希望這種方法是工作。任何人都可以告訴我如何在不使用ng-repeat的情況下使其工作。

Answer 1

我也建議讓ngRepeat工作，但要回答這個問題問...

不要使用ngModel和ngChecked在一起。

嘗試這種情況：

<label>CHANNELS</label> 
    <md-checkbox ng-model="selected[0]" class="md-primary md-hue-2" ng-true-value="channel[0]" ng-false-value="null">CHANNEL A</md-checkbox> 
    <md-checkbox ng-model="selected[1]" class="md-primary md-hue-2" ng-true-value="channel[1]" ng-false-value="null">CHANNEL B</md-checkbox> 
    <md-checkbox ng-model="selected[2]" class="md-primary md-hue-2" ng-true-value="channel[2]" ng-false-value="null">CHANNEL C</md-checkbox> 
    <md-checkbox ng-model="selected[3]" class="md-primary md-hue-2" ng-true-value="channel[3]" ng-false-value="null">CHANNEL D</md-checkbox> 
    <md-checkbox ng-model="selected[4]" class="md-primary md-hue-2" ng-true-value="channel[4]" ng-false-value="null">CHANNEL E</md-checkbox> 

這將如果複選框被選中的selected數組的值設定爲channel陣列的對應的值。注意：您不能使用selected.length來確定是否有任何內容被檢查，因爲selected數組總是有4個成員，其中一些可能爲空。