angular的全选与反选删除等

最新推荐文章于 2020-06-18 10:10:15 发布

Yw_Ambition

最新推荐文章于 2020-06-18 10:10:15 发布

阅读量1w

点赞数

分类专栏： Web前端文章标签： angular

本文链接：https://blog.csdn.net/Yw59792649/article/details/78229185

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.js"></script>

</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="add"/><button ng-click="clicks()">查找</button>
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th><input type="checkbox" ng-model="checkAll" ng-click="check2()" >全选</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>操作<button ng-click="deleAll()">批量删除</button></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data|filter:pps">
        <td>{{$index}}</td>
        <td><input type="checkbox" ng-model="item.check" ng-click="count($index)"></td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.salary}}</td>
        <td><button ng-click="delete($index)">删除</button></td>
    </tr>
    </tbody>    
    </table>
</body>
</html>

  <script>
        var app = angular.module("myapp",[]);
        var item = [
            {"name":"李四","age":"20","sex":"boy","salary":"2000"},
            {"name":"王五","age":"19","sex":"girl","salary":"3000"},
            {"name":"赵六","age":"22","sex":"boy","salary":"1000"},
            {"name":"钱七","age":"20","sex":"boy","salary":"5000"},
            {"name":"王八","age":"32","sex":"boy","salary":"4000"}
            ];
        app.controller("myCtrl",function ($scope) {
            $scope.data = item;
            $scope.clicks = function () {
                $scope.pps = $scope.add;
            }


            //删除
            $scope.delete = function ($index) {
                if($index>=0){
                    $scope.data.splice($index,1);
                }
            }
            //全选
            $scope.checkAll = false;
            $scope.check2 = function () {
                if($scope.checkAll == true){
                    for (var i = 0 ; i<$scope.data.length ; i++){
                        $scope.data[i].check =true;
                    }
                }else{
                    for (var i = 0 ; i<$scope.data.length ; i++){
                        $scope.data[i].check =false;
                    }
                }
            }
            //下面全选 之后 上面自动选择
            var n = 0 ;
            $scope.count= function (index) {
                if($scope.data[index].check == true){
                    n++;
                }else {
                    n--;
                }
                if(n==$scope.data.length){
                    $scope.checkAll =true;
                }else {
                    $scope.checkAll = false;
                }
            }
            //批量删除

            $scope.deleAll = function () {
                for (var i = 0 ; i<$scope.data.length;i++ ){
                    if($scope.data[i].check == true){
                        $scope.data.splice(i,1);
                        i--;
                    }
                }
            }

        });
    </script>

这里写图片描述

Yw_Ambition

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular的全选与反选删除等

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.js"></script></head><body ng-app="myapp" ng-controller="myCtrl"><input type="text"
复制链接

扫一扫

专栏目录