温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

angular如何实现增删改查和验证

发布时间:2021-06-26 10:43:35 来源:亿速云 阅读:285 作者:小新 栏目:web开发

小编给大家分享一下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如何实现增删改查和验证 ”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI