用angular实现多选按钮的全选与反选

最新推荐文章于 2024-05-07 21:56:32 发布

安静的对折

最新推荐文章于 2024-05-07 21:56:32 发布

阅读量2.6k

点赞数 1

分类专栏： ng 文章标签： angular 全选反选

本文链接：https://blog.csdn.net/k491022087/article/details/54588290

版权

本文将介绍如何使用Angular框架来实现多选按钮的全选和反选功能，通过Angular的双向数据绑定和事件处理，轻松创建交互式的多选组件。

摘要由CSDN通过智能技术生成

在页面中我们常常会遇到多选框，例如购物车里的商品

下面用angular来实现这一功能

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/angular.min.js"></script>
</head>
<body ng-app="select" ng-controller="moreSel">

全选: <input type="checkbox" ng-checked="checks" ng-click="checks = !checks; all(checks)">
<!--track by $index去掉也可以-->
<div ng-repeat="item in datas track by $index">
<input type="checkbox" ng-checked="chkItem[$index]" ng-click="ck(chkItem[$index]==undefind?false:chkItem[$index], item, $index)">{
  { item }}
</div>
<pre>{
  {arr}}</pre>
</body>

<script>
    //创建模块
    angular.module("select", [])
            //控