zoukankan      html  css  js  c++  java
  • 使用AngularJS实现简单:全选和取消全选功能

    <!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>

  • 相关阅读:
    vue2.0是不支持通过下标来更改数组的,无法做到响应式
    C# 深拷贝 Bitmap对象示例
    vscode终端中文乱码
    TkbmMemTable使用总结
    openssl 证书概念介绍
    openssl源码介绍
    python变量赋值特性
    openssl安装
    github开源协议选择
    NLP 多分类神经网络
  • 原文地址:https://www.cnblogs.com/tzz-ing/p/5786839.html
Copyright © 2011-2022 走看看