anglejsのチェックボックスの選択を制限する方法

Question

画面に10個のチェックボックスがあります。私はチェックボックスを5つだけチェックしたい。 5つ以上のチェックボックスをチェックすると、「5つだけチェックする」チェックボックスを1つ表示する必要があります。チェックボックス自体をクリックするだけで

jsfiddle

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

 
function MyCtrl($scope) { 
 
    
 
    $scope.items = [{ 
 
     id: 1, 
 
     title: 'item1', 
 
     selected: true 
 
    },{ 
 
     id: 2, 
 
     title: 'item2', 
 
     selected: false 
 
    },{ 
 
     id: 3, 
 
     title: 'item3', 
 
     selected: false 
 
    },{ 
 
     id: 4, 
 
     title: 'item4', 
 
     selected: false 
 
    },{ 
 
     id: 5, 
 
     title: 'item5', 
 
     selected: false 
 
    },{ 
 
     id: 6, 
 
     title: 'item6', 
 
     selected: false 
 
    },{ 
 
     id: 7, 
 
     title: 'item7', 
 
     selected: false 
 
    },{ 
 
     id: 8, 
 
     title: 'item8', 
 
     selected: false 
 
    },{ 
 
     id: 9, 
 
     title: 'item9', 
 
     selected: false 
 
    },{ 
 
     id: 10, 
 
     title: 'item10', 
 
     selected: false 
 
    } 
 
    ]; 
 
    
 
    
 
       
 
}

<div ng-controller="MyCtrl"> 
 

 
    <div ng-repeat="item in items"> 
 
     <input id="{{ item.id }}" 
 
       type="checkbox" 
 
       ng-model="item.selected" 
 
       ng-checked="item.selected" /> 
 
    <label for="{{ item.id }}" >{{ item.title }}</label> 
 
</div> 
 
</div>

私は警告メッセージを表示する必要があります。私は一度に5つのチェックボックを選択する必要があります。私はこれをどうやってできるのか教えてください。真

if($('#myclass option:selected').length() > 4){ 
    alert("WARNING") 
} 

Answer 1

私は、クラスを選択し、選択したどのように多くのカウントを行うには、JSを使用して、その後彼らにクラスを与えるお勧めしますカウント> 5

$scope.checkSelected = function(item){ 
    var c = 0; 
    angular.forEach(items, function(item, key) { 
    if(item.selected){ 
     c++; 
    } 
    }); 
    if(c>5){ 
    item.selected = false; 
    alert('Not more than 5'); 
    } 
} 

Answer 2

をあなたはonclickのforeachの中で選択されたチェックボックスをカウントした場合に警告を表示できます。

Answer 3

あなたは選択されたカウントのチェックボックスのリストを検証しますウォッチャー追加することができ

：

$scope.$watch(function() { 
    return $scope.items; 
}, 
function (newValue, oldValue) { 
    if(newValue !== undefined && oldValue !== undefined){ 
    var selected = newValue.filter(function(_item){ 
      return _item.selected == true; 
     }); 

     if(selected.length > 4){ 
     //disable other checkboxes 
     angular.forEach($scope.items, function(item, key) { 
      if(item.selected === false){ 
      item.disabled = true; 
      } 
     }); 
     } 
     else{ // enable all 
     angular.forEach($scope.items, function(item, key) { 
      item.disabled = false; 
     }); 
     } 
    }   
}, true); 

を

Demo

Answer 4

あなたはng-changeディレクティブを使用することができます。

<input id="{{ item.id }}" 
      type="checkbox" 
      ng-model="item.selected" 
      ng-change="processChecked(item)" /> 

$scope.processChecked = function(item) { 
    var checked = $scope.items.filter(function(i) { 
     return i.selected; 
    }); 

    if (checked.length > 5) { 
     alert("more than 5!"); 
     item.selected = false; // undo last action 
    } 
}