<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
th,td{
width: 100px;
height: 40px;
border: 1px solid #000000;
}
/* tr:hover{
background: #69717d;
}*/
table{
border-collapse: collapse;
margin-top: 8px;
}
.wh{
width: 20px;
height: 20px;
}
.juli{
margin-right: 40px;
}
.ys{
background: #0a9dc7;
}
</style>
<script src="angular-1.5.5/angular.min.js"></script>
<script>
/*声明模块*/
var myapp=angular.module("myapp",[]);
/*为模块加控制器*/
myapp.controller("myCtrl",function ($scope) {
/*创建数组*/
$scope.items=[
{
"name":"张三",
"wz":"大前锋",
"qh":11,
"page":555
},
{
"name":"李四",
"wz":"火箭队",
"qh":33,
"page":666
},
{
"name":"王五",
"wz":"冲冲冲队",
"qh":55,
"page":777
},
{
"name":"赵六",
"wz":"飞快队",
"qh":77,
"page":888
},
{
"name":"周七",
"wz":"滕武队",
"qh":99,
"page":999
}
];
/*排序*/
$scope.pageSize="票数倒序";
$scope.sort=function(){
/*注意“”里汉字和<option><option>里相同*/
if($scope.pageSize=="票数倒序"){
$scope.revers=true;
}else if($scope.pageSize=="票数正序"){
$scope.revers=false;
}
};
/*添加新成员,不能重复,不能为空*/
$scope.additem=function () {
for(var i=0;i<$scope.items.length;i++){
if($scope.name==$scope.items[i].name){
alert("不能重复");
return;
}
if($scope.name==null){
alert("不能为空");
return;
}
}
/*写在循环外边*/
$scope.items.push({"name":$scope.name,"wz":$scope.wz,"qh":$scope.qh,"page":$scope.page});
/*隐藏*/
$scope.xian=false;
}
/*显示隐藏*/
$scope.xian=false;
/*显示*/
$scope.showall=function () {
/*显示*/
$scope.xian=true;
}
/*查询,敏感字*/
/**/
$scope.chazhao="";
/**/
$scope.chazhao2="";
$scope.$watch("chazhao",function(value){
if(value.indexOf("枪")!=-1){
alert("敏感字");
/**/
$scope.chazhao="";
}else{
$scope.chazhao2=$scope.chazhao;
}
});
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
查询:
<input type="text" ng-model="chazhao">
排序:
<select ng-model="pageSize" ng-change="sort()">
<option>票数倒序</option>
<option>票数正序</option>
</select><br>
<button ng-click="showall()" class="ys">新增球员</button><br>
<div ng-show="xian">
姓名:<input type="text" ng-model="name"><br>
位置:<input type="text" ng-model="wz"><br>
球号:<input type="text" ng-model="qh"><br>
票数:<input type="text" ng-model="page"><br>
<button ng-click="additem()">提交</button>
</div>
</table>
<table>
<tr>
<th ng-click="sort('name')">姓名</th>
<th ng-click="sort('wz')">位置</th>
<th ng-click="sort('qh')">球号</th>
<th ng-click="sort('page')">票数</th>
</tr>
<!--注意|filter:{name:chazhao2}中“chazhao2”-->
<tr ng-repeat="item in items|filter:{name:chazhao2}|orderBy:'page':revers">
<td>{{item.name}}</td>
<td>{{item.wz}}</td>
<td>{{item.qh}}</td>
<td>{{item.page}}</td>
</tr>
</table>
</body>
</html>
angular的敏感字,判断不为空,不重复运用
最新推荐文章于 2021-05-13 16:09:58 发布