<!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", '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>
AngularJS+添加+条件筛选+排序
最新推荐文章于 2019-08-21 15:07:07 发布