Check Alle Checkbox-Funktion in einem Modal

Question

Wenn der Benutzer auf "Daten hinzufügen" klickt, öffnet sich ein Modal, ich habe individuelle Checkboxen für data1, data2, data3, data4. Ich habe auch ein Kontrollkästchen alle Kontrollkästchen. Wenn der Nutzer darauf klickt, sollte er alle über 4 auswählen können. Wenn er erneut klickt, sollte er alle abwählen. Auch, wenn ausgewählt, wird der Wert von ‚Select All‘ sollte auf ‚Alle entfernen‘ ändern

Code:

<div ng-controller="ModalDemoCtrl"> 
    <script type="text/ng-template" id="myModalContent.html"> 

     <div class="modal-body"> 
      <label><input type="checkbox" ng-model="checkboxModel.value1"> Data1</label><br/> 
      <label><input type="checkbox" ng-model="checkboxModel.value2"> Data2</label><br/> 
      <label><input type="checkbox" ng-model="checkboxModel.value3"> Data3</label><br/> 
      <label><input type="checkbox" ng-model="checkboxModel.value4"> Data4</label><br/> 
      <label><input type="checkbox" ng-model="checkboxModel.value5">Select All</label><br/> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
      <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
     </div> 
    </script> 

    <button type="button" class="btn btn-default" ng-click="open()">Add data</button> 
</div> 

Kann jemand lassen Sie mich wissen, wie dies zu erreichen. Ich sah viele Beiträge online, aber jeder hatte ng-Wiederholung für die ersten 4 Checkboxen. Meine ist ohne Verwendung von ng-repeat. Kann jemand bitte beraten.

Ich habe folgendes Plunker: http://plnkr.co/edit/nSCGJzj1zG5SGO2N76L3?p=preview

Answer 1

Ich bemerkte, hinzufügen, dass Sie nicht auf die Element-Array banden. Ich reparierte, dass das folgende Markup unter Verwendung:

<div ng-repeat="item in items"> 
     <label> 
     <input type="checkbox" ng-model="item.Selected">{{item.name}}</label> 
     <br/> 
    </div> 
    <label> 
     <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()">Select All</label> 
    <br/> 

Danach hatte ich die Struktur der Elemente Eigenschaft ändern später für ein Objekt zu werden Bindung:

$scope.items = [{ 
name: 'item 1' 
}, { 
name: 'item 2' 
}, { 
name: 'item 3' 
}, ]; 

Um in der Lage sein, alle zu aktualisieren die anderen Kontrollkästchen, griff ich zu dem folgenden Code:

$scope.checkAll = function() { 

if ($scope.selectedAll) { 
    $scope.selectedAll = true; 
} else { 
    $scope.selectedAll = false; 
} 
angular.forEach($scope.items, function(item) { 
    item.Selected = $scope.selectedAll; 
}); 

} 

Benutzen Sie dieses plunker Beispiel für die volle Arbeitslösung.

UPDATE

Answer 2

Verwenden Sie das Beispiel hier: https://docs.angularjs.org/api/ng/directive/ngChecked#! im Grunde der Trick ist, für alle „Slave“ Kontrollkästchen

ng-checked="checkboxModel.value5" 

Answer 3

Nun, zunächst die Erklärung:

1. Zum aktivieren/deaktivieren aller checkboxes, können Sie einfach Schleife über die Elemente und Einstellen aller Checkbox true/false.

2. Um dieses Kontrollkästchen programmgesteuert zu aktivieren/deaktivieren, können Sie die Methode Array.prototype.every() verwenden. Wenn alle Kontrollkästchen ausgewählt sind oder nicht, wird/werden alle Elemente ausgewählt, andernfalls wird/behalten abgewählt.

3. Um alle ausgewählten Elemente beim Schließen des Modales zu erhalten, können Sie die Methode Array.prototype.filter() verwenden, um nur die ausgewählten Kontrollkästchen zurückzugeben.

Hier ist ein Schnipsel arbeiten:

(function() { 
 
    "use strict"; 
 
    angular 
 
    .module('ui.bootstrap.demo', [ 
 
     'ngAnimate', 
 
     'ui.bootstrap' 
 
    ]) 
 
    .controller('ModalDemoCtrl', ModalDemoCtrl) 
 
    .controller('ModalInstanceCtrl', ModalInstanceCtrl); 
 

 
    function ModalDemoCtrl($scope, $uibModal, $log) { 
 
    $scope.animationsEnabled = true; 
 

 
    $scope.open = function(size) { 
 
     var modalInstance = $uibModal.open({ 
 
     animation: $scope.animationsEnabled, 
 
     templateUrl: 'myModalContent.html', 
 
     controller: 'ModalInstanceCtrl', 
 
     size: size, 
 
     resolve: { 
 
      items: function() { 
 
      return $scope.items; 
 
      } 
 
     } 
 
     }); 
 

 
     modalInstance.result.then(function(selectedItems) { 
 
     $scope.selected = selectedItems; 
 
     }, function() { 
 
     $log.info('Modal dismissed at: ', new Date()); 
 
     }); 
 
    } 
 

 
    $scope.toggleAnimation = function() { 
 
     $scope.animationsEnabled = !$scope.animationsEnabled; 
 
    } 
 
    } 
 

 
    // Please note that $uibModalInstance represents a modal window (instance) dependency. 
 
    // It is not the same as the $uibModal service used above. 
 

 
    function ModalInstanceCtrl($scope, $uibModalInstance, items) { 
 
    $scope.items = []; 
 

 
    function loadData() { 
 
     var arr = []; 
 
     for (var i = 1; i <= 5; i++) { 
 
     arr.push({ 
 
      "name": "Item " + i 
 
     }); 
 
     } 
 
     return arr; 
 
    } 
 

 
    $scope.items = loadData(); 
 

 
    $scope.check = function() { 
 
     $scope.selectedAll = $scope.items.every(function(value) { 
 
     return value.Selected; 
 
     }); 
 
    } 
 

 
    $scope.selectAll = function() { 
 
     $scope.items.forEach(function(item) { 
 
     item.Selected = $scope.selectedAll; 
 
     }); 
 
    } 
 

 
    function getChecked() { 
 
     return $scope.items.filter(function(value) { 
 
     return value.Selected; 
 
     }); 
 
    } 
 

 
    $scope.ok = function() { 
 
     $uibModalInstance.close(getChecked()); 
 
    } 
 

 
    $scope.cancel = function() { 
 
     $uibModalInstance.dismiss('cancel'); 
 
    } 
 
    } 
 
})();

.main_div { 
 
    border: 1px solid red; 
 
    width: 30%; 
 
    margin: 50px; 
 
    padding: 2px; 
 
}

<!DOCTYPE HTML> 
 
<html ng-app="ui.bootstrap.demo"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
</head> 
 

 
<body ng-controller="ModalDemoCtrl"> 
 
    <script type="text/ng-template" id="myModalContent.html"> 
 
    <div class="modal-body"> 
 
     <div class="checkbox" ng-repeat="item in items"> 
 
     <label> 
 
      <input type="checkbox" ng-model="item.Selected" ng-change="check()"> {{item.name}} 
 
     </label> 
 
     <br/> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input type="checkbox" ng-model="selectedAll" ng-click="selectAll()"> Select All 
 
     </label> 
 
     </div> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
 
     <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
 
    </div> 
 
    </script> 
 

 
    <button type="button" class="btn btn-default" ng-click="open()">Add data!</button> 
 
</body> 
 

 
</html>

Wenn Sie wollen, dass es in Plunker, um zu sehen, here klicken.

Ich hoffe es hilft !!