angula的增删改除

最新推荐文章于 2023-03-01 10:43:49 发布

情缘灬國風

最新推荐文章于 2023-03-01 10:43:49 发布

阅读量268

点赞数

本文链接：https://blog.csdn.net/shaoyanyu/article/details/78599469

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
姓名查询条件：<input type="text" id="name"/>
<select id="paixu" ng-options="x for x in orders" ng-model="selected" ng-init="selected=order[0]" ng-change="change()">
</select>
<br>用户列表<br>
<table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped table-hover">
<tr style="background: #999999;">
<td><input type="checkbox" id="quan" ng-click="quan()" /></td>
<td>姓名</td>
<td>年龄</td>
<td>拼音</td>
<td>职位</td>
<td>操作</td>
</tr>
<tr ng-repeat="person in persons">
<td><input type="checkbox" class="myCb" /></td>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.pinyin}}</td>
<td>{{person.zhiwei}}</td>
<td><a href="#" ng-click="dele($index)">删除</a></td>
</tr>
</table>
<input type="button" id="piliang" value="批量删除" ng-click="deleAll()" />
<input type="button" id="cha" value="查询" ng-click="cha()" />
<input type="button" id="add" value="添加用户" ng-click="show()" />
<form id="f">
<fieldset id="">
<legend>添加用户信息</legend>
姓名:<input type="text" name="name1" id="name1" /><br> 年龄:
<input type="text" name="age" id="age" /><br> 拼音:
<input type="text" name="pinyin" id="pinyin" /><br> 职位:
<input type="text" name="zhiwei" id="zhiwei" /><br>
<input type="button" value="保存" ng-click="save()" />

</fieldset>
</form>
<script type="text/javascript">
//默认隐藏
$("#f").hide();
var m=angular.module("myApp",[]);
m.controller("myCtrl",function($scope){
//初始化数据
$scope.persons = [{
"name": "张三",
"age": 20,
"pinyin": "zhangsan",
"zhiwei": "总经理"
}, {
"name": "李四",
"age": 25,
"pinyin": "lisi",
"zhiwei": "副经理"
}, {
"name": "王五",
"age": 22,
"pinyin": "wangwu",
"zhiwei": "工程师"
}];
$scope.cha=function(){
var name=$("#name").val();
if(name==""){
alert("请输入姓名");
return;
}
if(name.indexOf("奥")!=-1){
alert("有敏感词");
return;
}
var newpersons=[];
for (var i=0;i<$scope.persons.length;i++) {
var p=$scope.persons[i];
if(p.name==name){
newpersons.push(p);
}
}
if (newpersons.length==0) {
alert("没有匹配项");
return;
}
$scope.persons=newpersons;
}
$scope.orders=["按年龄正序排列", "按年龄倒序排列"];
$scope.change=function(){
var pai=$("#paixu").val();
alert("dd"+pai);
if (pai=="string:按年龄正序排列") {
$scope.persons.sort(function(a,b){
if(a.age>b.age){
return 1;
}else if(a.age<b.age){
return -1;
}
return 0;
});
}else{
$scope.persons.sort(function(a, b) {
if (a.age > b.age) {
return -1;
} else if (a.age < b.age) {
return 1;
}
return 0;
});
}
}
$scope.show=function(){
$("#f").show(1000);
}
$scope.save=function(){
var age=$("#age").val();
var b=isNaN(age);
if (b==true) {
alert("年龄格式不正确");
}
var name12 = $("#name1").val();
var age = $("#age").val();
var pinyin = $("#pinyin").val();
var zhiwei = $("#zhiwei").val();
var pe = {
"name": name12,
"age": age,
"pinyin": pinyin,
"zhiwei": zhiwei
}; //创建ｐｅｒｓｏｎ对象
$scope.persons.push(pe);
//消失
$("#f").hide();
}
$scope.dele=function($index){
var c=confirm("是否确认删除？");
if(c=true){
$scope.persons.splice($index,1);
}else{}
}
$scope. deleAll=function(){
var b=confirm("是否确认删除");
if (b==true) {
var cbs=$("input[type=checkbox][class=myCb]:checked");
for (var i = 0; i < cbs.length; i++) {
var cd=cbs[i];
var tr=cd.parentNode.parentNode;
tr.remove();
}
}
}
var flag=false;
$scope.quan=function(){
var cbs=$("input[type=checkbox]");
if (flag==false) {
for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = true;
}
flag=true;
} else{
for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = false;
}
flag=false;
}
}
})
</script>
</body>
</html>