使用额外的ng-model检查所有复选框

时间:2015-08-30 03:32:22

标签: javascript angularjs

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   
    <input value="{{d}}" type="checkbox"/>
     check this to check all checkbox and show the button
    <br><br>
    
    <li ng-repeat="d in data"><input ng-model="results[$index]" value="{{d}}" type="checkbox"/>{{$index}}</li>
    <button ng-show="showButton()">Submit</button>
  </body>

</html>
removeDuplicates()

上面的代码绑定了每个复选框并显示保存按钮,如果其中任何一个被选中,但现在我在实现主复选框时遇到问题,这将检查所有复选框并显示按钮。

http://gopkg.in/mgo.v2#SetDebug

1 个答案:

答案 0 :(得分:0)

检查工作演示:Plunker

添加一个新复选框:

<input type="checkbox" ng-change="toggleCheckAll()" ng-model="allChecked" />
check this to check all checkbox and show the button

每次检查/取消选中此chechbox时,都会调用函数toggleCheckall。在控制器中:

$scope.allChecked = false;
$scope.toggleCheckAll = function () {
    for (var key in $scope.results) {
        $scope.results[key] = $scope.allChecked;
    }
};