angular 增删改查和验证

互联网 18-5-11

本片文章主要介绍angular的增删改查以及验证，感兴趣的朋友参考下。

代码如下：

<!DOCTYPE html>    <html>        <head>            <meta charset="UTF-8">            <title>增删改查</title>            <script src="js/angular.min.js"></script>            <script>                var app = angular.module("anan", []);                app.controller("enen", function($scope) {                    $scope.user = [{                        ck:false,                        id: 1,                        name: '李1',                        pwd: 123456,                        level: 3                    }, {                        ck:false,                        id: 2,                        name: '李2',                        pwd: 123456,                        level: 1                    }, {                        ck:false,                        id: 3,                        name: '李3',                        pwd: 123456,                        level: 3                    }, {                        ck:false,                        id: 4,                        name: '李4',                        pwd: 123456,                        level: 1                    }, {                        ck:false,                        id: 5,                        name: '李5',                        pwd: 123456,                        level: 2                    }, {ck:false,                            id: 6,                        name: '李6',                        pwd: 123456,                        level: 3                    }, {                        ck:false,                        id: 7,                        name: '李7',                        pwd: 123456,                        level: 2                    }, {                        ck:false,                        id: 8,                        name: '李8',                        pwd: 123456,                        level: 1                    }, {                        ck:false,                        id: 9,                        name: '李9',                        pwd: 123456,                        level: 2                    }, {                        ck:false,                        id: 10,                        name: '李10',                        pwd: 123456,                        level: 1                    }];                                        $scope.ckAll=function(){                        for(var i=0;i<$scope.user.length;i++){                            $scope.user[i].ck=$scope.flag;                        }                    }                    $scope.delso=function(){                        var shu=0;                        for(var i=0;i<$scope.user.length;i++){                            if($scope.user[i].ck){                                $scope.user.splice(i,1);                                shu++;                                i--;                            }                        }                    }                    $scope.insert=function(m){                        var good={ck:false,id:$scope.tid,name:$scope.tname,pwd:$scope.tpwd,level:$scope.tlevel};                        $scope.user.push(good);                    }                })            </script>            <style type="text/css">                #cll:nth-child(even){                    background-color: lightseagreen;                }                #cll:nth-child(odd){                    background-color:#C9C994;                }            </style>        </head>        <body ng-app="anan" ng-controller="enen">            <div style="margin: 0 auto; height:800px;  width: 1000px;  border: 1px solid greenyellow; ">                <input placeholder="用户名搜索" ng-model="souname"/>                <select ng-model="jb"><option value="">选择级别</option ><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>                　　　　　　　　　　　排序<select ng-model="px"><option>排序</option>    <option value="id">id</option><option value="level">级别</option></select><br/>                <button style=" background-color: #008000; margin: 6px; color: #FFFFFF;" ng-click="m=true">新增用户</button><button style="color: #FFFFFF; background-color: crimson;margin: 6px;" ng-click="delso()">批量删除</button>                <div style="width: 1000px;border: 1px solid greenyellow;" ng-show="m">                    　id:<input type="number" ng-model="tid"/>　用户名:<input ng-model="tname"/>　密码:<input ng-model="tpwd"/>　级别:<input type="number" ng-model="tlevel"/>　<button  ng-click="insert(m=false)">添加</button>                </div>                <table style="width: 1000px;" border="1px">                    <tr style="background-color: cadetblue;">                        <td><input type="checkbox" ng-click="ckAll()" ng-model="flag"/></td>                        <td>id</td>                        <td>用户名</td>                        <td>密码</td>                        <td>级别</td>                        <td>操作</td>                    </tr>                    <tr id="cll" ng-repeat="e in user|orderBy:px:false|filter:{name:souname}|filter:{level:jb}">                        <td><input type="checkbox" ng-model="e.ck"/></td>                        <td>{{e.id}}</td>                        <td>{{e.name}}</td>                        <td><span> {{e.pwd}}</span>                            <span  ng-show="f">                               <input  ng-model="e.pwd" /> <button  ng-click="f=false">保存</button>                           </span></td>                        <td>{{e.level}}</td>                        <td><button ng-click="f=true">修改密码</button></td>                    </tr>                </table>            </div>        </body>    </html>

相关推荐：

Angular如何进行服务端渲染开发

Angular4中router使用技巧

angular4共享多个组件数据通信案例详解

以上就是angular 增删改查和验证的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：删改