モーダル内のすべてのチェックボックス機能をチェックします

Question

ユーザーが「データを追加」をクリックするとモーダルが開き、data1、data2、data3、data4の個々のチェックボックスがあります。私はまた、すべてのチェックボックスをチェックしています。ユーザーがこれをクリックすると、4を超えるすべてを選択できます。もう一度クリックするとすべてを選択解除する必要があります。

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

誰かが私はこれを達成する方法を知らせることができます：また、一度選択し、「すべて選択」の値が

コード「すべてを選択解除」に変更する必要があります。私はオンラインでたくさんの投稿を見ましたが、最初の4つのチェックボックスはそれぞれng-repeatでした。私はng-repeatを使用していません。誰か助言してもらえますか？

私は、次のplunker持っている：http://plnkr.co/edit/nSCGJzj1zG5SGO2N76L3?p=preview

Answer 1

すべて「スレーブ」のチェックボックスに追加することです。その後

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

、私は後で結合するためのオブジェクトになるためのアイテムプロパティの構造を変更する必要がありました：

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

すべて更新できるようにするために、私は次のマークアップを使用していることを固定しました他のチェックボックスは、私は次のコードに頼っ：

$scope.checkAll = function() { 

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

} 

は、完全な実用的なソリューションのために、この plunker例を参照してください。

UPDATE

Answer 2

使用ここでは例： https://docs.angularjs.org/api/ng/directive/ngChecked#を！ は基本的にトリックが、私はあなたがアイテムの配列に結合していなかったことに気づい

ng-checked="checkboxModel.value5" 

Answer 3

まあ、最初の説明：

1. すべてcheckboxes、あなたができるだけで要素をループとし、すべてのチェックボックスを設定することを選択/選択解除するにはtrue/false。

2. Array.prototype.every()メソッドを選択/選択解除するには、すべてのチェックボックスが選択されているかどうか、すべての要素が選択されている場合はそれを返し、そうでなければ/ keep選択解除されます。

3. モーダルを閉じるときに選択したアイテムをすべて取得するには、Array.prototype.filter()メソッドを使用して、選択したチェックボックスのみを返すことができます。

ここ作業スニペットです：

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

あなたはplunkerでそれを見たい場合は、hereをクリックします。

私はそれが助けて欲しいです！