前端_添加成员_排序

最新推荐文章于 2024-02-08 15:15:22 发布

哥哥儿

最新推荐文章于 2024-02-08 15:15:22 发布

阅读量230

点赞数

本文链接：https://blog.csdn.net/qq_39707849/article/details/78301598

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-collapse: collapse;
        }
    </style>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var myapp = angular.module("myapp", []);
        myapp.controller("myCtrl", 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.ageSize = "--请选择--";
            $scope.fun = function () {
                console.log($scope.ageSize);
            };
            $scope.ageFilter = function (item) {
                //console.log(item.age);
                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.add = function (user) {
                console.log(user);
                user.page++;
            };
            $scope.addNew = function () {
                $scope.users.push({
                    'url': "images/5.png",
                    'name': $scope.name,
                    'wz': $scope.wz,
                    "age": $scope.age,
                    "qd": $scope.team,
                    "page": 0
                })
            };
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div>
    <h2>添加新球员</h2>
    <div>姓名:<input type="text" ng-model="name"></div>
    <div>位置:<input type="text" ng-model="wz"></div>
    <div>年龄:<input type="text" ng-model="age"></div>
    <div>球队:<input type="text" ng-model="team"></div>
    <button ng-click="addNew()">添加新球员</button>
</div>
<h3>用户信息表</h3>
<div>
    <input placeholder="用户名查询" size="10"/>
    <!--<input ng-model="ageSize" placeholder="年龄查询(a-b)" size="10"/>-->
    年龄：
    <select ng-model="ageSize">
        <option>--请选择--</option>
        <option>11-20</option>
        <option>21-30</option>
        <option>31-40</option>
        <option>41-50</option>
        <option>51-60</option>
    </select>
</div>
<div>
    <table border="1" cellpadding="10">
        <thead>
        <tr>
            <th>球员</th>
            <th>姓名</th>
            <th>位置</th>
            <th>年龄</th>
            <th>球队</th>
            <th>得票数</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="user in users|filter:ageFilter">
            <td><img src="{{user.url}}"></td>
            <td>{{user.name}}</td>
            <td>{{user.wz }}</td>
            <td>{{user.age}}</td>
            <td>{{user.qd }}</td>
            <td>{{user.page}}</td>
            <td>
                <button ng-click="add(user)">投票</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>