球员——（添加，敏感字）

最新推荐文章于 2022-05-19 22:36:52 发布

Cf1035630950

最新推荐文章于 2022-05-19 22:36:52 发布

阅读量292

点赞数

本文链接：https://blog.csdn.net/Cf1035630950/article/details/78827348

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>球员</title>
<script type="text/javascript" src="js/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.people = [{
name: "张三",
weizhi: "控球后卫",
num: 11,
piaoshu: 999
}, {
name: "李四",
weizhi: "大前锋",
num: 21,
piaoshu: 888
}, {
name: "王五",
weizhi: "小前锋",
num: 23,
piaoshu: 777
}, {
name: "赵六",
weizhi: "中锋",
num: 10,
piaoshu: 666
}, {
name: "周七",
weizhi: "得分后卫",
num: 1,
piaoshu: 555
}];

//实现排序
$scope.sel = "请选择";
if($scope.sel == "请选择") {
$scope.sel = "";

}

//入库
$scope.isshow = false;
$scope.addPeople = function() {
if($scope.isshow) {
$scope.isshow = false;

} else {
$scope.isshow = true;
}
}
//添加
$scope.newName = "";
$scope.newWeizhi = "";
$scope.newNum = "";
$scope.newPiaoshu = "";
$scope.add = function() {
for(p in $scope.people)
//判断是否重复
if($scope.newName == $scope.people[p].name) {
alert("重复了");
return null;

}

var add = {
name: $scope.newName,
weizhi: $scope.newWeizhi,
num: parseInt($scope.newNum),
piaoshu: parseInt($scope.newPiaoshu)
};
$scope.people.push(add);
$scope.newName = "";
$scope.newWeizhi = "";
$scope.newNum = "";

$scope.newPiaoshu = ""

//隐藏书写框
$scope.isshow=false;

}

});
//实现查询敏感词过滤
app.filter("mingan", function() {
return function(input) {
return input.replace(/王/g, "**");
}
});

</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
查询：<input type="text" placeholder="请输入" ng-model="select" /> 排序：
<select ng-model="sel">
<option value="">请选择</option>
<option value="-piaoshu">票数倒叙</option>
<option value="piaoshu">票数正序</option>
</select>
<button style="background: paleturquoise;" ng-click="addPeople()">新增球员</button>

<table border="1" cellpadding="10" cellspacing="0" ng-show="isshow()">
<tr>
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>

<tr ng-repeat="p in people | filter:{name:select} | orderBy:sel">
<td>{{p.name | mingan}}</td>
<td>{{p.weizhi}}</td>
<td>{{p.num}}</td>
<td>{{p.piaoshu}}</td>
</tr>

</table>

<table style="margin-top:20px ;" cellpadding="5" ng-show="isshow">
<tr style="text-align: center;">
<td colspan="2">
<h3>添加</h3></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" ng-model="newName" /></td>
</tr>
<tr>
<td>位置</td>
<td><input type="text" ng-model="newWeizhi" /></td>
</tr>
<tr>
<td>球号</td>
<td><input type="text" ng-model="newNum" /></td>
</tr>
<tr>
<td>票数</td>
<td><input type="text" ng-model="newPiaoshu" /></td>
</tr>
<tr style="text-align: center;">
<td colspan="2"><input type="submit" value="添加" ng-click="add()" /></td>
</tr>
</table>

</body>

</html>