Angular的小综合

来源：互联网发布：吉林11选5数据遗漏编辑：程序博客网时间：2024/05/21 06:24

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body ng-app="Mapp" ng-controller="Mctrl">
姓名:<input type="text" id="xm1" />
位置:<input type="text" id="wz1" />
球号:<input type="text" id="qh1" />
票数:<input type="text" id="qs1" />

<br />
<br />


查询 :
<input type="text" ng-model="name" ng-keydown="cha($event)" id="cx"/><br />
排序
<select ng-init="xz=px[0]" ng-model="xz" ng-options="x for x in px" ng-change="change()">

</select>
<br />
<input type="button" name="" id="add" value="新增球员" ng-click="add()"/>

<table border="1" class="table table-striped">
<tr><td>姓名</td>
<td>位置</td>
<td>球号</td>
<td>票数</td>
</tr>

<tr ng-repeat="xx in goods">
<td>{{xx.gname|Myfilter}}</td>
<td>{{xx.wz}}</td>
<td>{{xx.qh}}</td>
<td>{{xx.ps}}</td>
</tr>
</table>

<script type="text/javascript">
var an=angular.module("Mapp",[]);

an.filter("Myfilter",function(){
return function(dat){
return dat.replace(/傻/g,"##");
}
})

an.controller("Mctrl",function($scope){

$scope.px=["升序","降序"];
$scope.goods=[{"gname":"张三","wz":"控球后卫","qh":"11","ps":"999"},
{"gname":"李四","wz":"大前锋","qh":"21","ps":"888"},
{"gname":"王五","wz":"小前锋","qh":"23","ps":"777"},
{"gname":"赵六","wz":"中锋","qh":"10","ps":"666"}];

//添加
$scope.add=function(){
var use=$("#xm1").val();
var weizhi=$("#wz1").val();
var qh=$("#qh1").val();
var ps=$("#qs1").val();

if(use=="")
{
alert("不能为空");
return;
}

for (var i=0;i<$scope.goods.length;i++) {
var sz=$scope.goods[i];
var name=sz.gname;
if(use==name)
{
alert("不能重复");
return;
}
}
var tj={"gname":use,"wz":weizhi,"qh":qh,"ps":ps};
$scope.goods.push(tj);

}
//降序升序
$scope.change=function(){
var paixu=$scope.xz;
if(paixu=="升序")
{
$scope.goods.sort(function(a,b){
if(a.ps<b.ps){
return -1;
}else if(a.ps>b.ps){
return 1;
}

return 0;
});
}else if(paixu=="降序")
{
$scope.goods.sort(function(a,b){
if(a.ps>b.ps)
{
return 1;
}else if(a.ps<b.ps)
{
return -1;
}
return 0;

});
}
}
//查询
$scope.cha=function($event){
var key=$event.keyCode;

if(key==13)
{
var cxmz=$("#cx").val();

var cxsz=[];
for (var q=0;q<$scope.goods.length;q++) {
if(cxmz==$scope.goods[q].gname)
{
cxsz.push($scope.goods[q]);
}
}
$scope.goods=cxsz;
}

}

});

</script>
</body>
</html>

阅读全文

0 0