angular 增刪改查與驗證

墨辰丷
發布: 2018-05-11 14:43:53
原創
1463 人瀏覽過

本片文章主要介紹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: &#39;李1&#39;,  
                    pwd: 123456,  
                    level: 3  
                }, {  
                    ck:false,  
                    id: 2,  
                    name: &#39;李2&#39;,  
                    pwd: 123456,  
                    level: 1  
                }, {  
                    ck:false,  
                    id: 3,  
                    name: &#39;李3&#39;,  
                    pwd: 123456,  
                    level: 3  
                }, {  
                    ck:false,  
                    id: 4,  
                    name: &#39;李4&#39;,  
                    pwd: 123456,  
                    level: 1  
                }, {  
                    ck:false,  
                    id: 5,  
                    name: &#39;李5&#39;,  
                    pwd: 123456,  
                    level: 2  
                }, {ck:false,  
  
                    id: 6,  
                    name: &#39;李6&#39;,  
                    pwd: 123456,  
                    level: 3  
                }, {  
                    ck:false,  
                    id: 7,  
                    name: &#39;李7&#39;,  
                    pwd: 123456,  
                    level: 2  
                }, {  
                    ck:false,  
                    id: 8,  
                    name: &#39;李8&#39;,  
                    pwd: 123456,  
                    level: 1  
                }, {  
                    ck:false,  
                    id: 9,  
                    name: &#39;李9&#39;,  
                    pwd: 123456,  
                    level: 2  
                }, {  
                    ck:false,  
                    id: 10,  
                    name: &#39;李10&#39;,  
                    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 增刪改查與驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板