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

AngularJS+添加+条件筛选+排序

2017-10-21 11:09 423 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>球队</title>
<script src="../angular-1.5.5/angular.min.js"></script>
<script>
var app = angular.module("myapp",[]);
app.controller("mycont",function ($scope) {
$scope.users=[{
'url':"images/1.png",
'name':"Westbrook",
'wz':"得分后卫（SG）",
"age":24,
"qd":"雷霆",
"page":1900
},{
'url':"images/2.png",
'name':"James",
'wz':"大前锋（PF）",
"age":23,
"qd":"骑士",
"page":1900
},{
'url':"images/3.png",
'name':"Curry",
'wz':"得分后卫（SG）",
"age":30,
"qd":"勇士",
"page":1800
},{
'url':"images/4.png",
'name':"Harden",
'wz':"小前锋（SG）",
"age":13,
"qd":"火箭",
"page":1800
},{
'url':"images/5.png",

f1c9
'name':"Durant",
'wz':"得分后卫（SG）",
"age":35,
"qd":"勇士",
"page":1712
}];
$scope.add = function () {
$scope.users.push({url:"images/5.png",name:$scope.name,wz:$scope.wz,age:$scope.age,qd:$scope.qd,page:0});
$scope.name = "";
$scope.wz = "";
$scope.age = "";
$scope.qd = "";
}
$scope.ageSize = "--请选择--";
$scope.ageFilter = function (item) {
if ($scope.ageSize != "--请选择--"){
var ageSize = $scope.ageSize;
var ageArr = ageSize.split("-");
var min = ageArr[0];
var max = ageArr[1];
var age = item.age;
if (age > max || age < min){
return false;
} else {
return true;
}
} else {
return true;
}
}
$scope.addpiao = function (item) {
item.page++;
}
/*$scope.revers = false;
$scope.sortColumn = "name";
$scope.sort = function (count) {
if($scope.sortColumn == count){
$scope.revers=!$scope.revers;
}
$scope.sortColumn = count;
}*/
})
</script>
</head>
<body ng-app="myapp" ng-controller="mycont">
<h1>添加新球员</h1>
姓名:<input type="text" ng-model="name"><br/>
位置:<input type="text" ng-model="wz"><br/>
年龄:<input type="text" ng-model="age"><br/>
球队:<input type="text" ng-model="qd"><br/>
<button ng-click="add()">添加新球员</button><br/><br/>
<h3>用户信息表</h3>
<input type="text" placeholder="用户名查询" ng-model="search">
年龄查询 ：<select ng-model="ageSize">
<option>--请选择--</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
</select ><br/>
<table cellspacing="0" cellpadding="10" border="soild 1px #000">
<tr>
<th>球员</th>
<th ng-click="sort('name')">姓名</th>
<th ng-click="sort('wz')">位置</th>
<th ng-click="sort('age')">年龄</th>
<th ng-click="sort('qd')">球队</th>
<th>得票数</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in users|filter:{name:search}|filter:ageFilter"><!--|orderBy:sortColumn:revres-->
<td><img ng-src="{{item.url}}"></td>
<td>{{item.name}}</td>
<td>{{item.wz}}</td>
<td>{{item.age}}</td>
<td>{{item.qd}}</td>
<td>{{item.page}}</td>
<td><button ng-click="addpiao(item)">投票</button></td>
</tr>
</table>
<p></p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航