在模态中选中全部复选框功能

Question

如果用户点击＆＃39;添加数据＆＃39;一个模态打开，我有data1，data2，data3，data4的单独复选框。我也有一个复选框。如果用户点击此内容，则应该能够选择全部高于4，如果再次点击，则应取消全部选择。此外，一旦选定，选择全部＆＃39;应更改为“取消全选”。

代码：

<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

使用此处的示例： https://docs.angularjs.org/api/ng/directive/ngChecked#！ 基本上诀窍是添加到所有＆＃34;奴隶＆＃34;复选框

ng-checked="checkboxModel.value5"

Answer 2

我注意到你没有绑定到items数组。我通过使用以下标记来修复它：

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

之后，我不得不将items属性的结构更改为以后绑定的对象：

$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示例以获取完整的解决方案。

<强>更新

Answer 3

嗯，首先是解释：

1. 要选择/取消选择所有checkboxes，您只需循环播放元素并将所有复选框设置为true/false。

2. 要以编程方式选择/取消选中此复选框，您可以使用Array.prototype.every()方法，如果选中了所有复选框，则会返回，如果选择了所有元素，则选择了/保持选项，否则，它会被/取消选择。

3. 要在关闭模式时获取所有选定项目，您可以使用Array.prototype.filter()方法仅返回所选复选框。

这是代码段 正常工作：

＆＃13;
＆＃13;
(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');
    }
  }
})();
＆＃13;
.main_div {
  border: 1px solid red;
  width: 30%;
  margin: 50px;
  padding: 2px;
}
＆＃13;
<!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>
＆＃13;
＆＃13;
＆＃13;

如果您想在plunker中看到它，请点击here。

我希望它有所帮助!!