AngulaerNba球员添加查询的简单实现

春风十里桃花开

于 2017-10-22 18:50:36 发布

阅读量362

点赞数

分类专栏：混合开发文章标签： AngularJs NBA

本文链接：https://blog.youkuaiyun.com/wanleiSuper/article/details/78311989

版权

混合开发专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的球员信息管理系统，该系统允许用户添加新的球员信息，并提供了基于姓名和年龄范围的筛选功能。此外，用户还可以为喜欢的球员投票增加其得票数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.js"></script>
    <script src="../angular-1.5.5/angular-route.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.xm="";
            $scope.wz="";
            $scope.nl="";
            $scope.qd="";
            $scope.age="";
            $scope.addgoods=function () {

                $scope.users.push({name:$scope.xm,wz:$scope.wz,age:$scope.nl,qd:$scope.qd,url:"images/1.png"});
            }
            $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.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.add=function (user) {
                user.page++;
            }

        })
    </script>
    <style>
        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
    <span>姓名:</span><input type="text" ng-model="xm"/><br/>
    <span>位置:</span><input type="text" ng-model="wz"/><br/>
    <span>年龄:</span><input type="text" ng-model="nl"/><br/>
    <span>球队:</span><input type="text" ng-model="qd"/><br/>
    <button ng-click="addgoods()">添加新球员</button>
    <p>用户信息表</p>
    <input placeholder="用户名查询" size="10" ng-model="xmFilter">
    年龄<select ng-model="ageSize">
        <option>--请选择--</option>
        <option>1-10</option>
        <option>11-20</option>
        <option>21-30</option>
        <option>31-40</option>
    </select>
    <table border="1" cellpadding="10">
        <tr>
            <th>球员</th>
            <th>姓名</th>
            <th>位置</th>
            <th>年龄</th>
            <th>球队</th>
            <th>得票数</th>
            <th>操作</th>
        </tr>
        <tr ng-repeat="item in users|filter:ageFilter|filter:xmFilter">
            <td><img 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="add(item)">投票</button></td>
        </tr>
    </table>
</body>
</html>