明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

angular 增刪改查與驗證

發(fā)表時間：2023-09-10 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本片文章主要介紹angular的增刪改查以及驗證，感興趣的朋友參考下。代碼如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>增刪改查&...
本片文章主要介紹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>

相關(guān)推薦：

Angular如何進(jìn)行服務(wù)端渲染開發(fā)

Angular4中router使用技巧

angular4共享多個組件數(shù)據(jù)通信案例詳解

以上就是angular 增刪改查和驗證 的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。