angular实现投票

最新推荐文章于 2021-01-13 22:15:43 发布

原创最新推荐文章于 2021-01-13 22:15:43 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #lgh

Web前段专栏收录该内容

9 篇文章

订阅专栏

这篇博客展示了如何使用AngularJS 1.5.5版本创建一个投票应用。应用包括添加新成员、根据年龄筛选成员以及为成员投票的功能。用户可以输入姓名、位置、年龄和球队信息来添加新成员，还可以通过年龄范围筛选成员，并点击按钮为成员投票，增加其得票数。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular-1.5.5/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.addNew=function () {
               $scope.users.push({'url':"images/5.png",'name':$scope.name,'wz':$scope.wz,"age":$scope.age,"qd":$scope.team,"page":0})
           }
            $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.count=function (user) {
                console.log(user);
                user.page++;
            }
        })
    </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="用户查询" ng-model="cx"/>
    年龄:
    <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>
            <td>球员</td>
            <td>姓名</td>
            <td>位置</td>
            <td>年龄</td>
            <td>球队</td>
            <td>得票数</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="user in users|filter:{name:cx}|filter:ageFilter">
            <td><img src="images/1.png"></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="count(user)">投票</button></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>