使用AngularJS实现简单:全选和取消全选功能

最新推荐文章于 2024-04-04 00:33:09 发布

qq_29069777

最新推荐文章于 2024-04-04 00:33:09 发布

阅读量124

点赞数

分类专栏：前端文章标签： css3 html5 angularjs bootstrap angular

原文链接：https://www.mk2048.com/blog/blog.php?id=h00ika2achaa&title=%E4%BD%BF%E7%94%A8AngularJS%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%3A%E5%85%A8%E9%80%89%E5%92%8C%E5%8F%96%E6%B6%88%E5%85%A8%E9%80%89%E5%8A%9F%E8%83%BD

版权

前端专栏收录该内容

1175 篇文章 2 订阅

订阅专栏

这里用到AngularJS四大特性之二----双向数据绑定

注意：没写一行DOM代码！这就是ng的优点，bootstrap.css为了布局，JS代码也只是简单创建ng模块和ng控制器

效果：

<!DOCTYPE html>
<html lang="en" ng-app="myModule5"><!--3、ng-app="myModule5"启动ng并调用模块-->
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/bootstrap.css">
  <title>全选/取消全选</title>
</head>
<body>
<div class="container" ng-controller="myCtrl5"><!--4、ng-controller="myCtrl5"启用控制器-->
  <h2>全选和取消全选</h2>
  <table class="table table-bordered">
    <thead>
    <tr>
      <th>选择</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>
        <input ng-checked="selectAll" type="checkbox">
      </td>
      <td>Tom</td>
      <td>
        <button class="btn btn-danger btn-xs">删除</button>
      </td>
    </tr>
    <tr>
      <td>
        <input ng-checked="selectAll" type="checkbox">
      </td>
      <td>Mary</td>
      <td>
        <button class="btn btn-danger btn-xs">删除</button>
      </td>
    </tr>
    <tr>
      <td>
        <input ng-checked="selectAll" type="checkbox">
      </td>
      <td>King</td>
      <td>
        <button class="btn btn-danger btn-xs">删除</button>
      </td>
    </tr>

    </tbody>
  </table>

  <input type="checkbox" ng-model="selectAll">
  <span ng-hide="selectAll">全选</span>
  <span ng-show="selectAll">取消全选</span>
</div>
<script src="js/angular.js"></script><!--1、引入angularJS-->
<script>
  //2、创建自定义模块和控制器
  angular.module('myModule5', ['ng']).
    controller('myCtrl5', function($scope){

  });
</script>
</body>
</html>

更多专业前端知识，请上【猿2048】www.mk2048.com

qq_29069777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用AngularJS实现简单:全选和取消全选功能

这里用到AngularJS四大特性之二----双向数据绑定注意：没写一行DOM代码！这就是ng的优点，bootstrap.css为了布局，JS代码也只是简单创建ng模块和ng控制器效果： <!DO...
复制链接

扫一扫