Home > Article > Web Front-end > Angular addition, deletion, modification, checking and verification

Angular addition, deletion, modification, checking and verification

墨辰丷Original: 2018-05-11 14:43:531453browse

This article mainly introduces the addition, deletion, modification, checking and verification of angular. Interested friends can refer to it.

The code is as follows:

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

Related recommendations:

How Angular performs services Side rendering development

Tips on using router in Angular4

Detailed explanation of multiple component data communication cases shared by angular4

The above is the detailed content of Angular addition, deletion, modification, checking and verification. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to close the current web page in HTMLNext article：How to close the current web page in HTML

See more

Angular addition, deletion, modification, checking and verification

Related articles