AngularJS 多个复选框的疑惑（Angular Material）答案

【问题标题】：AngularJS multiple checkboxes doubts (Angular Material)AngularJS 多个复选框的疑惑（Angular Material）
【发布时间】：2016-12-05 00:06:06
【问题描述】：

我正在尝试使用相同的 ng-model 获取多个 Angular Material 复选框。我有两个问题：如何获得默认选中的复选框，以及如何使这些复选框中的至少一个成为必需的。我尝试使用 ng-checked，但无法通过表单发布值。

HTML

      <label for="inputPassword3" class="col-sm-2 control-label">Školski sat *</label>
      <div class="col-sm-10" >
        <span class="col-sm-2" ng-repeat="period in periods">
          <md-checkbox ng-model="form.periods[period]" ng-click="toggle(period, selected)">
            {{ period }}. sat
          </md-checkbox>
        </span>{{selected | json}}
      </div>

App.js

$scope.periods = [1,2,3,4,5,6,7,8,9,0]; /*broj sati*/
      $scope.selected = [2];
      $scope.toggle = function (period, list) {
        var idx = list.indexOf(period);
        if (idx > -1) {
          list.splice(idx, 1);
        }
        else {
          list.push(period);
        }
      };
      $scope.exists = function (period, list) {
        return list.indexOf(period) > -1;
      };

请帮忙。

【问题讨论】：

标签： angularjs angularjs-material

【解决方案1】：

实际上您的ngModel 是一个对象，因此要在加载时呈现选定的值，您应该执行以下操作：

$scope.model = {};
$scope.model.periods = {"2": true};

要获取所有选中的复选框，您应该遍历键，如下所示：

$scope.save = function() {
  // Get all checked boxes
  var checked = Object.keys($scope.model.periods).filter(function(key) {
    return $scope.model.periods[key];
  });
  console.log(checked);
}

看到它工作：

(function() {
  angular
    .module('app', ['ngMaterial'])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.model = {};
    $scope.model.periods = {"2": true};
    $scope.periods = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; /*broj sati*/

    $scope.save = function() {
      // Get all checked boxes
      var checked = Object.keys($scope.model.periods).filter(function(key) {
        return $scope.model.periods[key];
      });
      console.log(checked);
    }
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <form name="form">
    <div class="col-md-12">
      <label for="inputPassword3" class="col-sm-2 control-label">Školski sat *</label>
      <div class="col-sm-10">
        <span class="col-sm-2" ng-repeat="period in periods">
          <md-checkbox ng-model="model.periods[period]">
            {{ period }}. sat
          </md-checkbox>
        </span>
      </div>
      <span ng-bind="model.periods | json"></span>
      <hr>
      <button type="button" class="btn btn-success" ng-click="save()">Save data</button>
    </div>
  </form>
</body>

</html>

希望对你有帮助。

【讨论】：

感谢 developer033，就是这样。非常感谢您的努力！