练习3

最新推荐文章于 2021-10-15 21:45:47 发布

Saco_x

最新推荐文章于 2021-10-15 21:45:47 发布

阅读量219

点赞数

本文链接：https://blog.csdn.net/A_LiXianSheng/article/details/78576800

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<link rel="stylesheet" href="css/bodys.css" />
</head>
<body ng-app="Mapp" ng-controller="Mctrl">
姓名：<input type="text" id="name" class="xtext"/>
位置：<input type="text" id="weizhi" class="xtext"/>
球号：<input type="text" id="qiuhao" class="xtext"/>
票数：<input type="text" id="piaoshu" class="xtext"/><br />
<input type="button" value="添加" id="add" ng-click="add()" class="button" />
查询：<input type="text" id="chaName" ng-keydown="cha($event)" />
排序：<select ng-model="xuanxiang" ng-options="x for x in names" ng-init="xuanxiang = names[0]" ng-change="change()" ></select><br />

<br /><br /><br /><br /><br />
<table border="1px solid" cellpadding="0" cellspacing="0">
<tr style="background: #999;">
<td>姓名</td>
<td>位置</td>
<td>承受伤害</td>
<td>票数</td>
</tr>
<tr ng-repeat="p in persons | orderBy:persons.predicate">
<td>{{p.name | guolv}}</td>
<td>{{p.weizhi}}</td>
<td>{{p.qiuhao}}</td>
<td>{{p.piaoshu}}</td>
</tr>
</table>
</body>
<script type="text/javascript">
var app = angular.module("Mapp",[]);
app.filter("guolv",function(){
return function(input){
var newInput = input.replace(/宋社鹏/g,"******");
return newInput;
}
});
app.controller("Mctrl",function($scope){
$scope.names = ["升序","降序"];
$scope.persons = [{
"name":"宋社鹏",
"weizhi":"坦克",
"qiuhao":"12421",
"piaoshu":99,
},{
"name":"王庆",
"weizhi":"中单",
"qiuhao":"5002",
"piaoshu":120,
},{
"name":"刘洋",
"weizhi":"辅助",
"qiuhao":"12551",
"piaoshu":101,
}];
$scope.add = function(){
var name = $("#name").val();
var weizhi = $("#weizhi").val();
var qiuhao = $("#qiuhao").val();
var piaoshu = $("#piaoshu").val();
if(name == ""){
alert("姓名不可为空");
return;
}
for (var i = 0; i < $scope.persons.length; i++) {
var name0 = $scope.persons[i];
var name1 = name0.name;
if(name1 == name){
alert("该用户名已存在");
return;
}
}
var newPersons = {
"name":name,
"weizhi":weizhi,
"qiuhao":qiuhao,
"piaoshu":piaoshu
};
$scope.persons.push(newPersons);
}
$scope.cha = function($event){
var chaName = $("#chaName").val();
var key = $event.keyCode;
if(key == 13){
var newPersons = [];
for (var i = 0; i < $scope.persons.length; i++) {
if(chaName==$scope.persons[i].name){
newPersons.push($scope.persons[i]);
}
}
$scope.persons = newPersons;
}
}
$scope.change = function(){
var xz = $scope.xuanxiang;
if(xz=="升序"){
$scope.persons.predicate = "piaoshu";
}else if(xz=="降序"){
$scope.persons.predicate = "-piaoshu";
}
}
});

</script>
</html>

Saco_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习3

姓名：位置：球号：票数：查询：排序：姓名位置承受伤害票数{{p.name | guolv}}{{p.weizhi}}{{p.qiuhao}}{{p.piaoshu}}var app = angular.module("Mapp",[]);app.filter("guolv",function()
复制链接

扫一扫