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

最新推荐文章于 2019-02-13 12:28:00 发布

Logitech12

最新推荐文章于 2019-02-13 12:28:00 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/logitech12/article/details/78302142

版权

<!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>

Logitech12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS+添加+条件筛选+排序

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.
复制链接

扫一扫