您的位置：首页 > Web前端 > AngularJS

AngularJs的过滤，添加，相同名字的验证

2017-10-23 20:28 441 查看


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular-1.5.5/angular.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.users=[
{ 'name':"张三", 'wz':"控球后卫（SG）", "qh":11, "page":777},
{'name':"李四",'wz':"大前锋（PF）", "qh":21, "page":888},
{'name':"王五",'wz':"小前锋（SG）", "qh":23, "page":999},
{ 'name':"赵六", 'wz':"中锋（SG）", "qh":10, "page":666},
{'name':"周七", 'wz':"得分后卫（SG）", "qh":1, "page":555}
];
//进行排序
$scope.page="票数排序（正序）";

$scope.has=false;
$scope.pagefilter=function (item) {
$scope.nn= $scope.page;
if( $scope.nn=="票数排序（正序）"){

$scope.has=false;

return item.page;

}else if($scope.nn=="票数排序（倒序）"){

$scope.has=true;

return item.page;
}

}
//实现添加的功能
$scope.pp=false;
$scope.add=function () {
$scope.pp=true;
if($scope.pp==true){
$scope.sub=function () {
$scope.ss={'name':$scope.names, 'wz':$scope.wz, "qh":$scope.qd, "page":$scope.pages};
for(var i=0;i<$scope.users.length;i++){
if($scope.users[i].name==$scope.ss.name){
/* $scope. users.unshift( $scope.ss);*/
alert("该球员已存在")
break;
}else
if(i==$scope.users.length-1){
$scope.users.unshift( $scope.ss);
break;
}
}
}

}
}
//敏感字体的过滤
$scope.name="";//输入的内容
$scope.namew="";
$scope.$watch("name",function (value) {
if(value.indexOf("枪")!=-1){
alert("包含敏感字符")
$scope.name="";
}else{
$scope.namew= $scope.name;
}
})

});
/* //敏感字体的过滤
myapp.filter("www",function () {
return function (msg) {
return msg.replace(/[枪法轮暴力色情传销]/g,function (word) {
var cc="";
for(var i=0;i<word.length;i++){
cc+="*";
}
return cc;
})

}
});*/

</script>
<style>
body{
width: 1000px;
height: 1000px;
}
div{
width: 500px;
height: 1000px;
margin: 0 auto;
}
.tab tr td{
width: 400px;
height:80px;

}
button{
background: blue;

}
.table tr td {
width: 200px;
height:20px;
border-left: 1px solid black;

}

.table {
border: 1px solid black;

}
.table tr th {
width: 200px;
height:20px;
border-left: 1px solid black;
}

.table tr:nth-child(odd){background:#B1B1B1;}

.table tr:nth-child(even){background:white;}

</style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div>
<table class="tab">
<tr>
<td>
<p>查询</p>
<input type="text" ng-model="name"/>
</td>
<td>
<p>排序</p>
<select ng-model="page" ng-click="bb()">
<option >票数排序（正序）</option>
<option>票数排序（倒序）</option>

</select>
</td>
</tr>
<tr>
<td><button ng-click="add()">新增新球员</button></td>
</tr>
</table>
<table class="table">
<tr>
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
<tr ng-repeat="item in users|filter:namew|orderBy:pagefilter:has">
<td>{{item.name}}</td>
<td>{{item.wz}}</td>
<td>{{item.qh}}</td>
<td>{{item.page}}</td>

</tr&
9477
gt;
</table>
<table ng-show="pp">
<tr>
<td>
姓名：<input type="text" ng-model="names"/>
</td>
</tr>
<tr>
<td>
位置：<input type="text" ng-model="wz"/>
</td>
</tr>
<tr>
<td>
球队：<input type="text" ng-model="qd"/>
</td>
</tr>
<tr>
<td>
票数：<input type="text" ng-model="pages"/>
</td>
</tr>
<tr>
<td><button ng-click="sub()">提交</button></td>
</tr>
</table>
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航