gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:44:43 24 4
gpt4 key购买 nike

我正在创建一个按钮来选中所有复选框。问题是,当我单击按钮时,我的“全部检查”按钮无法选中所有复选框。

我该怎么做?

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 时,您应该以 Angular 的方式思考和行事。

首先定义模型:

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

然后,使用重复将模型渲染到 View 中。 (我不记得语法了)

<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 一样思考。

关于javascript - 如何在AngularJS上实现 "all check"按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48610010/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com