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

AngularJs球员的增加查询排序的方法

2017-10-24 18:36 441 查看
主要的代码结构如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="angular-1.3.0.js" ></script>
<script type="text/javascript" src="angular-route.js" ></script>
<style>
.addUser{
width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;
float: left;
}
center{
width: 500px;
margin: auto;
}
table{
width: 500px;

}
.select{
width: 200px;
height: 20px;
}
select{
width: 220px;
height: 25px;
}
.xx1{
float: left;
}
.xx2{
float: right;
}

#tb th{
background: #aaa;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
odd= {"background":"#ddd"};//奇数样式
even={"background":"#fff"};//偶数样式
odd_even("#table_test",odd,even);
});
function odd_even(id,odd,even){
$(" #tb").find("tr").each(function(index,element){
if(index%2==1)
$(this).css(odd);
else
$(this).css(even);
});
}
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.users = [
{name:"张三",wz:"控球后卫",num:11,ticket:999},
{name:"李四",wz:"大前锋",num:21,ticket:888},
{name:"王五",wz:"小前锋",num:23,ticket:890},
{name:"赵六",wz:"中锋",num:10,ticket:666},
{name:"周七",wz:"得分后卫",num:1,ticket:555},

];

$scope.addUser = function () {
$scope.addUserIsShow = true;
};
$scope.sub = function() {

var flag = true;
var flag1 = true;
for (var i in $scope.users) {

if ($scope.users[i].name == $scope.name) {
flag = false;
}

}
for (var i in $scope.users) {
if ("胡锦涛" == $scope.name) {
flag1 = false;
}
}
if (flag) {
if (flag1) {
if ($scope.name == "") {

alert("用户名不能为空");
} else {

var newUser = {
name: $scope.name,
wz: $scope.wz,
num: $scope.num,
ticket: $scope.ticket
}
//添加新用户.
$scope.users.push(newUser);
$scope.
14e03
name = "";
$scope.password = "";
$scope.age = "";
$scope.sex = "";
$scope.addUserIsShow = false;
}
} else {
alert("出现敏感字符！");
}
} else {
alert("该用户重复")
}

}
$scope.order = function () {
if ($scope.search_piao_shu_value == 1) {
$scope.users.sort(function (json1, json2) {
return (json1.ticket > json2.ticket) ? 1 : -1;
});
} else if ($scope.search_piao_shu_value == 2) {
$scope.users.sort(function (json1, json2) {
return (json1.ticket < json2.ticket) ? 1 : -1;
});
}
};
//排序
$scope.order2 = function (ticket) {
if (ticket == "") {
return;
}
return (parseInt(ticket) == 2) ? true : false;
}
});

</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
<div class="xx1">
<p style="text-align: left">查询</p>
<input ng-model="search" placeholder="用户名查询" class="select" />
</div>
<div class="xx2">
<p style="text-align: left">排序</p>
<select ng-model="search_piao_shu_value" ng-change="order()">
<option value="">排序</option>
<option value="1">票数正序</option>
<option value="2">票数倒序</option>
</select>
</div>
</div><br />

<div>

<table border="1" cellspacing="0" cellpadding="10" id="tb">
<tr>
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
</thead>
<tbody>

<tr ng-repeat="user in users | filter:{'name':search}| orderBy: ticket">
<td>{{user.name}}</td>
<td>{{user.wz}}</td>
<td>{{user.num}}</td>
<td>{{user.ticket}}</td>
</tr>
</tbody>
</table>
</div><br />
<button ng-click="addUser()" class="addUser">新增球员</button><br /><br />
<div ng-show="addUserIsShow">
<form action="">
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>姓名：</th>
<td><input ng-model="name" type="text" required placeholder="请输入姓名"/></td>
</tr>
<tr>
<th>位置：</th>
<td><input ng-model="wz" placeholder="请输入位置" /></td>
</tr><tr>
<th>球号：</th>
<td><input ng-model="num" placeholder="请输入球号" /></td>
</tr><tr>
<th>票数：</th>
<td><input ng-model="ticket" placeholder="请输入票数" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>
</tr>
</table>
</form>
</div>
</center>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航