删除选中的

AngularJS数据绑定与操作示例

最新推荐文章于 2021-05-31 04:09:15 发布

转载最新推荐文章于 2021-05-31 04:09:15 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wsq110/p/7710999.html

文章标签：

#javascript #ViewUI

本文通过一个具体的示例，展示了如何使用AngularJS进行数据绑定、操作及响应式表单控制。示例中包括了如何实现表格数据的动态显示、删除功能、全选与反选操作，以及如何通过AngularJS的指令和控制器来管理这些功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.js"></script>
    <style>
        button{
            border-radius:8px;
            margin-left: 320px;
            border: 1px solid #387ef5;
            background: #387ef5;
            color: white;
        }
        table{
            border: 1px solid #555555;
            width: 400px;
        }
    </style>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
             $scope.data = [{
                id:"1",
                name:"zs",
                age:"12",
                sex:"男",
                check:false
            },
                {
                    id:"2",
                    name:"ls",
                    age:"13",
                    sex:"女",
                    check:false
                },{
                    id:"3",
                    name:"ww",
                    age:"16",
                    sex:"男",
                    check:false
                },
                {
                    id:"4",
                    name:"zx",
                    age:"19",
                    sex:"女",
                    check:false
                }
            ];
             $scope.del=function () {
                 var num=0;
                 for(var i=0;i<$scope.data.length;i++){
                     if($scope.data[i].check==false){
                         num++;
                     }
                 }
                 if(num==$scope.data.length){
                     alert("请勾选数据");
                 }else{
                     for(var i=0;i<$scope.data.length;i++){
                         if($scope.data[i].check==true){
                             $scope.data.splice(i,1);
                             i--;
                         }
                     }
                 }
             }
            //全选
            $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;
                }
            }
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<button ng-click="del()">删除选中的</button>
    <table border="1" cellpadding="10" cellspacing="0">
        <thead>
        <tr>
            <th><input type="checkbox" ng-click="check2()" ng-model="checkAll"></th>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in data">
            <td><input type="checkbox" ng-model="item.check" ng-click="count($index)"></td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
        </tr>
        </tbody>
    </table>

</body>
</html>

转载于:https://www.cnblogs.com/wsq110/p/7710999.html