Angulares Hinzufügen, Löschen, Ändern, Überprüfen und Verifizieren-HTML-Tutorial-php.cn

Angulares Hinzufügen, Löschen, Ändern, Überprüfen und Verifizieren

墨辰丷

Freigeben： 2018-05-11 14:43:53

Original

1484 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Hinzufügen, Löschen, Ändern, Überprüfen und Überprüfen von Winkeln vorgestellt. Interessierte Freunde können darauf verweisen.

Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Wie Angular führt Dienstleistungen zur Side-Rendering-Entwicklung aus

Tipps für die Verwendung von Routern in Angular4

Detaillierte Erläuterung der von angle4 geteilten Fälle der Datenkommunikation mit mehreren Komponenten

Das obige ist der detaillierte Inhalt vonAngulares Hinzufügen, Löschen, Ändern, Überprüfen und Verifizieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!