Question

我是Angularjs的新手。我有一些遗留代码。一旦选中父复选框，我想选择所有复选框。下面是我父母的复选框。

<div class="form-group">
    <label for="test" class="col-xs-3 control-label"></label>
    <input type="checkbox" class="col-xs-1" checked>
</div>

如果有人检查了这个，则应选中所有剩余的复选框。下面是我的孩子复选框

<div class="form-group">
    <label for="firstName" class="col-xs-3 control-label">First Name</label>
    <input id="{{fields[0].name}}" type="checkbox" value="{{fields[0].name}}" ng-checked="selection.indexOf(fields[0].name) > -1" ng-click="toggleSelection(fields[0].name)" class="col-xs-1" />
    <div ng-class="{'col-xs-4':test && !tableView, 'col-xs-8':!isAvailable || test && tableView, 'review-column': true, even: true}">
    <input type="text" class="form-control" id="name2" ng-model="data.name.firstName" focus="" value="{{data.name.firstName}}"></input>
</div>

我尝试了很多建议，但似乎没有任何建议。有人可以指出一个正确的html与控制器js代码一起这样做。非常感谢

Answer 1

使用自定义指令来实现select_all check-box feature。

这是一个实现它的例子。

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.list = [{
        isSelected: true,
        desc: "One"
    }, {
        isSelected: false,
        desc: "Two"
    }, {
        isSelected: false,
        desc: "Three"
    }];
});

app.directive('checkboxAll', function () {
  return function(scope, iElement, iAttrs) {
    var parts = iAttrs.checkboxAll.split('.');
    iElement.attr('type','checkbox');
    iElement.bind('change', function (evt) {
      scope.$apply(function () {
        var setValue = iElement.prop('checked');
        angular.forEach(scope.$eval(parts[0]), function (v) {
          v[parts[1]] = setValue;
        });
      });
    });
    scope.$watch(parts[0], function (newVal) {
      var hasTrue, hasFalse;
      angular.forEach(newVal, function (v) {
        if (v[parts[1]]) {
          hasTrue = true;
        } else {
          hasFalse = true;
        }
      });
      if (hasTrue && hasFalse) {
        iElement.attr('checked', false);
        iElement.addClass('greyed');
      } else {
        iElement.attr('checked', hasTrue);
        iElement.removeClass('greyed');
      }
    }, true);
  };
});

<!DOCTYPE html>
<html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
    <div>
      <input checkbox-all="list.isSelected" /> Select All
    </div>
    <div ng-repeat="elem in list">
      <input type="checkbox" ng-model="elem.isSelected" /> {{elem.desc}}
    </div>
  </body>

</html>

请运行此代码

HEre is the plunker of the code

Answer 2

<div class="form-group">
    <label for="test" class="col-xs-3 control-label"></label>
    <input type="checkbox" class="col-xs-1" ng-model="checkbox">
</div>

<div class="form-group">
    <label for="firstName" class="col-xs-3 control-label">First Name</label>
    <input id="{{fields[0].name}}" type="checkbox" value="{{fields[0].name}}" ng-checked="checkbox" class="col-xs-1" />
    <div ng-class="{'col-xs-4':test && !tableView, 'col-xs-8':!isAvailable || test && tableView, 'review-column': true, even: true}">
    <input type="text" class="form-control" id="name2" ng-model="data.name.firstName" focus="" value="{{data.name.firstName}}"></input>
</div>

Angularjs selectall使用复选框

2 个答案: