Angular对标签的增删改查

最新推荐文章于 2022-01-29 10:13:52 发布

MissGentlemen

最新推荐文章于 2022-01-29 10:13:52 发布

阅读量343

点赞数

本文链接：https://blog.csdn.net/MissGentlemen/article/details/78766740

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>第二周练习</title>
<link rel="stylesheet" href="css/sty.css" />
<script type="text/javascript" src="js/angular.min.js"></script>
</head>

<body ng-app="MyApp" ng-controller="MyCont">
<center>
<div class="div">
<span class="span">姓名查询条件</span><input class="ipt" type="text" ng-model="val" ng-click="aler()" ng-keydown="pan()" />
<select class="select" ng-model="countrys" ng-change="sele()" ng-init="countrys='按年龄正序'">
<option>按年龄正序</option>
<option>按年龄倒序</option>
</select>
</div>
<br />
<div ng-show="xs">
<span class="span2">用户列表</span><br />
<table class="table" cellpadding="0px" cellspacing="0px">
<tr style="background-color: gray;">
<td>姓名</td>
<td>年龄</td>
<td>拼音</td>
<td>职位</td>
<td>操作</td>
</tr>
<tr ng-repeat="li in xin">
<td>{{li.gname}}</td>
<td>{{li.gage}}</td>
<td>{{li.gpin}}</td>
<td>{{li.gzhi}}</td>
<td><input class="dl" type="button" value="删除" ng-click="del($index)" /></td>
</tr>
</table>
<input class="btn1" type="button" value="查询" ng-click="cha()" />
<input class="btn2" type="button" value="添加用户" ng-click="jump()" />
</div>
<div ng-show="xs2">
<form>
<fieldset>
<legend>添加用户信息</legend>
姓名<input type="text" ng-model="tname" /><br /> 年龄
<input type="text" ng-model="tage" ng-blur="nan()" /><br /> 拼音
<input type="text" ng-model="tpin" /><br /> 职业
<input type="text" ng-model="tzhi" /><br />
<input type="button" value="添加" ng-click="tian()" />
</fieldset>
</form>
</div>
</center>
<script>
var mo = angular.module("MyApp", []);
mo.controller("MyCont", function($scope) {
var jishu=0;
$scope.$watch('val', function(newValue, oldValue) {
if($scope.val != oldValue) {
var flag = /妈|爸|傻逼|滚蛋|草你妈|二逼|鸡巴/g;
if(flag.test($scope.val)){
alert("不能说脏话哦")
jishu++;
}
}
if(jishu!=0){
$scope.val = $scope.val.replace(/妈|爸|傻逼|滚蛋|草你妈|二逼|鸡巴/g,"***")
}
});
var arr3=[]
$scope.xs = true;
$scope.xin = [{
"gname": "李新阳",
"gage": "20",
"gpin": "lixinyang",
"gzhi": "创业青年"
}, {
"gname": "小胖",
"gage": "20",
"gpin": "liubinpeng",
"gzhi": "葬爱家族"
}, {
"gname": "张立朝",
"gage": "1000000",
"gpin": "zhanglichao",
"gzhi": "嘴强王者"
}, {
"gname": "老石",
"gage": "16",
"gpin": "shichenguang",
"gzhi": "小屁孩"
}]
arr3=$scope.xin;
$scope.sele = function() {
var val = $scope.countrys;
if(val == "按年龄正序") {
$scope.xin.sort(function(a, b) {
return a.gage - b.gage;
})
} else {
$scope.xin.sort(function(a, b) {
return b.gage - a.gage;
})
}
}
$scope.del = function($index) {
if(window.confirm("确定要删除么")) {
$scope.xin.splice($index, 1);
}
}
$scope.cha = function() {
//if(arr2.length!=0){
// $scope.xin = arr2
//}else{
$scope.xin=arr3
//}

var val = $scope.val;
var arr = []
if(val == undefined) {
alert("请输入后查找！谢谢")
return;
}
for(var i = 0; i < $scope.xin.length; i++) {
if(val == $scope.xin[i].gname) {
arr.push($scope.xin[i])
}
}
if(arr.length == 0) {
alert("不好意思没有查到信息")
return;
}
$scope.xin = arr;
}
$scope.aler = function() {
var val = $scope.val;
if(val == undefined || val == "") {
alert("请输入姓名")
}
}

$scope.jump = function() {
$scope.xs = false;
$scope.xs2 = true;
}
$scope.tian = function() {
var panse = {
"gname": $scope.tname,
"gage": $scope.tage,
"gpin": $scope.tpin,
"gzhi": $scope.tzhi
}
$scope.xin.push(panse)
if(arr3!=undefined){
arr3.push(panse)
}

$scope.xs = true;
$scope.xs2 = false;
}
$scope.nan = function() {
if(isNaN($scope.tage)) {
alert("请输入数字")
}
}
})
</script>
</body>

</html>