angular 增删改查和验证
本片文章主要介绍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 增删改查和验证 的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在PDF中验证签名
Feb 18, 2024 pm 05:33 PM
我们通常接收到政府或其他机构发送的PDF文件，有些文件带有数字签名。验证签名后，我们会看到SignatureValid消息和一个绿色勾号。如果签名未验证，会显示有效性未知。验证签名很重要，下面看看如何在PDF中进行验证。如何在PDF中验证签名验证PDF格式的签名使其更可信，文档更容易被接受。您可以通过以下方式验证PDF文档中的签名。在AdobeReader中打开PDF右键单击签名，然后选择显示签名属性单击显示签名者证书按钮从“信任”选项卡将签名添加到“受信任的证书”列表中单击验证签名以完成验证让
微信好友辅助验证进行解封的详细方法
Mar 25, 2024 pm 01:26 PM
1、打开微信进入后，点击搜索图标，输入微信团队，点击下方的服务进入。2、进入后，点击左下方的自助工具的选项。3、点击后，在上方的选项内，点击解封/申诉辅助验证的选项。
如何在Ubuntu 24.04上安装Angular
Mar 23, 2024 pm 12:20 PM
Angular.js是一种可自由访问的JavaScript平台，用于创建动态应用程序。它允许您通过扩展HTML的语法作为模板语言，以快速、清晰地表示应用程序的各个方面。Angular.js提供了一系列工具，可帮助您编写、更新和测试代码。此外，它还提供了许多功能，如路由和表单管理。本指南将讨论在Ubuntu24上安装Angular的方法。首先，您需要安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境，可让您在服务器端运行JavaScript代码。要在Ub
如何使用PHP和Angular进行前端开发
May 11, 2023 pm 04:04 PM
随着互联网的飞速发展，前端开发技术也在不断改进和迭代。PHP和Angular是两种广泛应用于前端开发的技术。PHP是一种服务器端脚本语言，可以处理表单、生成动态页面和管理访问权限等任务。而Angular是一种JavaScript的框架，可以用于开发单页面应用和构建组件化的Web应用程序。本篇文章将介绍如何使用PHP和Angular进行前端开发，以及如何将它们
golang中如何验证输入是否为全角字符
Jun 25, 2023 pm 02:03 PM
在golang中，验证输入是否为全角字符需要用到Unicode编码和rune类型。Unicode编码是一种将字符集中的每个字符分配一个唯一的数字码位的字符编码标准，其中包含了全角字符和半角字符。而rune类型是golang中用于表示Unicode字符的类型。第一步，需要将输入转换为rune类型的切片。这可以通过使用golang的[]rune类型进行转换，例如
如何使用正则表达式验证IFSC代码？
Aug 26, 2023 pm 10:17 PM
印度金融系统代码是缩写。参与电子资金转移系统的印度银行分支机构由一个特殊的11位字符代码进行标识。印度储备银行在互联网交易中使用此代码在银行之间转移资金。IFSC代码分为两个部分。银行由前四个字符进行标识，而分支机构由最后六个字符进行标识。NEFT（全国电子资金转移）、RTGS（实时毛额结算）和IMPS（即时支付服务）是一些需要IFSC代码的电子交易。Method使用正则表达式验证IFSC代码的一些常见方法有：检查长度是否正确。检查前四个字符。Checkthefifthcharacter.Che
golang中如何验证输入是否为大写字母
Jun 24, 2023 am 09:06 AM
Golang是一门高性能、现代化的编程语言，在日常开发中经常涉及到字符串的处理。其中，验证输入是否为大写字母是一个常见的需求。本文将介绍在Golang中如何验证输入是否为大写字母。方法一：使用unicode包Golang中的unicode包提供了一系列函数来判断字符的编码类型。对于大写字母，其对应的编码范围为65-90（十进制），因此我们可以使用unicod
PHP 8 新特性：增加了验证和签名
Mar 27, 2024 am 08:21 AM
PHP8是PHP的最新版本，为程序员带来了更多的便利和功能。这个版本特别关注安全性和性能，其中一个值得注意的新特性是增加了验证和签名功能。在本文中，我们将深入了解这些新的功能及其用途。验证和签名是计算机科学中非常重要的安全概念。它们通常用于确保传输的数据是完整和真实的。在处理在线交易和敏感信息时，验证和签名变得尤为重要，因为如果有人能够篡改数据，可能会对
