<!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>
</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>
AngularJs的过滤,添加,相同名字的验证
最新推荐文章于 2018-09-11 16:10:00 发布