angular实现增删改查

来源：互联网发布：linux搭建jenkins svn 编辑：程序博客网时间：2024/05/29 03:17
<!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>
阅读全文
0 0