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

来源：互联网发布：中国农业生产总值数据编辑：程序博客网时间：2024/06/05 11:44
<!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>
阅读全文
0 0