如何在AngularJS上实现"all check"按钮

我正在创建一个按钮以检查所有复选框。问题在于我的" ast hast "按钮在我单击按钮时无法检查所有复选框。

我该怎么做？

angular.module('myapp', [])
    .controller('MainController', ['$scope', function($scope) {
        $scope.allcheck = function(){
            angular.forEach($scope.checkboxes, function(item){
             item.selected = event.target.checked;
        });
        };
    }]);

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="myscript.js"></script>
</head>
<body>
    <h1>AngularJS</h1>
    <div ng-controller="MainController">
        <button ng-click="allcheck()">all check</button>
        <input type="checkbox">a
        <input type="checkbox">b
        <input type="checkbox">c
    </div>
</body>
</html>

当您从Angular开始时，您应该以角度思考并做。

首先，您定义模型：

$scope.selected = [false, false, false];

然后，使用重复将模型渲染到视图中。(我不记得语法(

<div ng-repeat="item in selected">
   <input type="checkbox" ng-model="item" />
</div>

然后，您只需更改模型就可以实现所有检查。

$scope.checkAll = function() {
    for (var i = 0; i < $scope.selected.length; i++) {
         $scope.selected[i] = true;
    }
}

不要以为您正在与jQuery合作，像MVC一样思考。

相关内容

最新更新

热门标签：