前端_添加成员_排序

来源：互联网发布：arm linux gcc 4.4.3 编辑：程序博客网时间：2024/05/17 09:26
<!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>
阅读全文
0 0