限制複選框的選擇並綁定到AngularJS數組

Question

我想達到兩個目的：

1. 綁定數組複選框列表（只是一個字符串數組），並

2. 限制用戶可以對一些 1之間選擇的數量和可用的項目數少1

我可以得到（2）工作，直到用戶點擊的最後項目，在這一點上它失去了軌道和物品保持選擇。

交互代碼是在這裏：http://codepen.io/adamcodegarden/pen/bdbQqe（從一個類似的例子分叉）

我的HTML /角碼：

<p ng-repeat="item in allOptions" class="item" id="{{item}}"> 
     {{item}} <input type="checkbox" ng-change="sync(bool, item)" ng-model="bool" ng-checked="isChecked(item)"> Click this to sync this item with the target array. {{item}} Selected: {{bool}} 

和JS：

var myApp = angular.module("myApp", []); 

var maxItems = 1; 

myApp.controller('myController', function($scope) { 

    $scope.isChecked = function(item){ 
     var match = false; 
     for(var i=0 ; i < $scope.data.length; i++) { 
     if($scope.data[i] === item) { 
      match = true; 
     } 
     } 
     return match; 
    }; 

    $scope.allOptions = [ 
    'one', 'two', 'three', 'four' 
    ]; 

    $scope.data = [ 
    ]; 

    $scope.sync = function(bool, item){ 
    if (bool) { 
     // add item 
     $scope.data.push(item); 
     // if we have gone over maxItems: 
     if ($scope.data.length > maxItems) { 
     //remove oldest item 
     $scope.data.splice(0,1); 
     } 
    } else { 
     // remove item 
     for (var i=0 ; i < $scope.data.length; i++) { 
     if ($scope.data[i] === item){ 
      $scope.data.splice(i,1); 
     } 
     }  
    } 
    }; 

}); 

Answer 1

我喜歡plunker比codepen更多。因此，我創建這個plunker

http://plnkr.co/edit/l8gxQHXBQdFeKIuwf3f0?p=preview 

的主要思想是，我格式化原始數組爲：

$scope.allOptions = [ 
    {key: 'one'}, {key: 'two'}, {key: 'three'}, {key:'four'} 
]; 

和輕微變化到同步邏輯，以及：

$scope.sync = function(bool, item){ 
if (bool) { 
    // add item 
    $scope.data.push(item); 
    // if we have gone over maxItems: 
    if ($scope.data.length > maxItems) { 
    //remove first item 
    $scope.data[0].checked = false; 
    $scope.data.splice(0,1); 
    } 
} else { 
    // remove item 
    for (var i=0 ; i < $scope.data.length; i++) { 
    if ($scope.data[i] === item) { 
     $scope.data.splice(i,1); 
    } 
    }  
} 

};

而且改變HTML部分：

<p ng-repeat="item in allOptions" class="item" id="{{item.key}}"> 
    {{item.key}} <input type="checkbox" ng-change="sync(item.checked, item)" ng-model="item.checked"> Click this to sync this item with the target array. {{item.key}} Selected: {{bool}}