angular增删改查和验证

来源：动视网责编：小采时间：2020-11-27 15:25:25

angular增删改查和验证

angular增删改查和验证:本片文章主要介绍angular的增删改查以及验证，感兴趣的朋友参考下。代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>增删改查</title> <

推荐度：

点击下载本文 文档为doc格式

导读angular增删改查和验证:本片文章主要介绍angular的增删改查以及验证，感兴趣的朋友参考下。代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>增删改查</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>

angular增删改查和验证

推荐度：

点击下载本文 文档为doc格式

标签：查询验证增删改查

热门焦点

angular增删改查和验证

angular增删改查和验证

angular增删改查和验证

最新推荐

猜你喜欢

热门推荐