Wie schränkt man die Ankreuzfeldauswahl in angularjs ein

Question

Ich habe 10 Kontrollkästchen in einem Bildschirm. Ich möchte nur 5 Kontrollkästchen aktivieren. Wenn ich mehr als 5 Kontrollkästchen überprüfe, muss ich eine Warnmeldung anzeigen, "nur 5 Kontrollkästchen auswählen".

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>

Auf klicken Checkbox selbst ich brauche die Warnmeldung anzeigen. Ich muss nur 5 Checkboks gleichzeitig auswählen. Nicht mehr als 5. Bitte helfen Sie mir, wie ich das machen kann.

Answer 1

würde ich empfehlen ihnen Klassen dann js geben über die Klasse zu wählen, und eine Anzahl von tun, wie viele gewählt haben: true

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

Answer 2

Sie die Kontrollkästchen in einer foreach Onclick und alert zeigen zählen könnte, wenn count> 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 3

Sie können Beobachter hinzufügen, die für das ausgewählte Zählergebnis Checkboxliste validieren:

$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

Sie können von ng-change Richtlinie machen.

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