angular实现增删改查

最新推荐文章于 2022-11-17 14:05:54 发布

gh0708

最新推荐文章于 2022-11-17 14:05:54 发布

阅读量1.1k

点赞数

分类专栏： Web前段文章标签： angularjs lgh

本文链接：https://blog.csdn.net/gh0708/article/details/78350138

版权

Web前段专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        th,td{
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
    <script src="angular-1.5.5/angular.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.data=[{
                name:"张三",
                wz:"控球后卫",
                num:"11",
                ps:"999"
            },{
                name:"李四",
                wz:"大前锋",
                num:"21",
                ps:"888"
            },{
                name:"王五",
                wz:"小前锋",
                num:"23",
                ps:"777"
            },{
                name:"赵六",
                wz:"中锋",
                num:"10",
                ps:"666"
            },{
                name:"周七",
                wz:"得分后卫",
                num:"1",
                ps:"555"
            }];
            //过滤
            $scope.search="";
            $scope.search2="";
            $scope.$watch("search",function(value){
                console.log(value);
                if(value.indexOf("枪")!=-1){
                    alert("包含敏感字");
                    $scope.search="";
                }else{
                    $scope.search2=$scope.search;
                }
            });
            //排序
            $scope.sort="--请选择--";
            $scope.fun=function () {
                if($scope.sort!="--请选择--"){
                    if($scope.sort=="票数倒序"){
                        $scope.reverse=true;
                    }else if($scope.sort=="票数正序"){
                        $scope.reverse=false;
                    }
                }
            };
            //添加
            $scope.show=false;
            $scope.add=function () {
                $scope.show=true
            };
           $scope.push=function () {
               for(var i=0;i<$scope.data.length;i++){
                   if($scope.name==$scope.data[i].name){
                       alert("重复");
                       return;
                   }
                   if($scope.name==null||$scope.wz==null){
                       alert("为空");
                       return;
                   }
               }
               if($scope.corr==true){
                   //console.log(1)
                   $scope.data[$scope.index].num=$scope.num;

               }else{
                   //console.log(0)
                   $scope.data.push({name:$scope.name,wz:$scope.wz,num:$scope.num,ps:$scope.ps});
               }
               $scope.num="";
           };
           //改
           $scope.correct=function (index) {
               console.log(index);
               $scope.show=true;
               $scope.name=$scope.data[index].name;
               $scope.wz=$scope.data[index].wz;
               $scope.num=$scope.data[index].num;
               $scope.ps=$scope.data[index].ps;
               $scope.corr=true;
               $scope.index=index;
           };
            $scope.del=function(index){
                console.log(index);
                $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){
                //console.log(index);
                if($scope.data[index].check==true){
                    n++;
                }else{
                    n--
                }
                console.log(n);
                if(n==$scope.data.length){
                    $scope.checkAll=true;
                }else{
                    $scope.checkAll=false;
                }
            };
            //批量删除的方法
            $scope.delAll=function(){
                for(var i=0;i<$scope.data.length;i++){
                    if($scope.data[i].check==true){
                        $scope.data.splice(i,1);
                        i--;
                    }
                }
            }

        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<span>查询</span>
<input type="text" ng-model="search">
<span>排序</span>
<select ng-model="sort" ng-click="fun()">
    <option>--请选择--</option>
    <option>票数倒序</option>
    <option>票数正序</option>
</select><br>
<button ng-click="add()">新增球员</button>
<table>
    <thead>
    <tr>
        <th><input type="checkbox" ng-model="checkAll" ng-click="check2()">全选</th>
        <th>姓名</th>
        <th>位置</th>
        <th>球号</th>
        <th>票数</th>
        <th>操作</th>
        <th><button ng-click="delAll()">批量删除</button></th>
    </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in data|filter:{name:search}|filter:search2|orderBy:'ps':reverse">
            <td><input type="checkbox" ng-model="item.check" ng-click="count($index)"></td>
            <td>{{item.name}}</td>
            <td>{{item.wz}}</td>
            <td>{{item.num}}</td>
            <td>{{item.ps}}</td>
            <td><button ng-click="correct($index)">修改球号</button></td>
            <td><button ng-click="del($index)">删除</button></td>
        </tr>
    </tbody>
</table>
<table ng-show="show">
    <tr>
        <td>姓名</td>
        <td><input type="text" ng-model="name"></td>
    </tr>
    <tr>
        <td>位置</td>
        <td><input type="text" ng-model="wz"></td>
    </tr>
    <tr>
        <td>球号</td>
        <td><input type="text" ng-model="num"></td>
    </tr>
    <tr>
        <td>票数</td>
        <td><input type="text" ng-model="ps"></td>
    </tr>
    <tr>
        <td colspan="2"><button ng-click="push()">添加</button></td>
    </tr>
</table>
</body>
</html>

gh0708

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular实现增删改查

Title table{ border-collapse: collapse; } th,td{ padding: 10px; border: 1px solid #000; } var myapp=angu
复制链接

扫一扫