angular的添加,模糊查询,年龄区间查询,投票

最新推荐文章于 2022-03-28 15:05:17 发布

love_mysunshine

最新推荐文章于 2022-03-28 15:05:17 发布

阅读量458

点赞数

本文链接：https://blog.csdn.net/love_mysunshine/article/details/78301818

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--样式-->
    <style>
       th,td{
    width: 120px;
    height: 40px;
    border: 1px solid #000000;
              }
        table{
            border-collapse: collapse;
        }
    </style>
    <!--导入angular的包-->
    <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.addItem=function () {
        $scope.users.push({'url':"images/5.png",'name':$scope.name,'wz':$scope.wz,'age':$scope.age,'qd':$scope.qd,"page":0});
    }
    /*投票*/
            $scope.count=function(item){
                console.log(item);
                item.page++;
            };
            /*年龄区间查询，注意过滤*/
            $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;
                }

            };        })
    </script>
</head>
<!--ng-myapp,ng-controller-->
<body ng-app="myapp" ng-controller="myCtrl">
<h2>添加新的成员</h2>
<!--输入值绑定，不然添加为空-->
姓名：<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="addItem()">添加新成员</button>
<h2>用户信息表</h2>
<!--绑定过滤模糊查询-->
<input type="text" placeholder="用户名查询" ng-model="chazhao">
<!--绑定年龄区间查询-->
年龄:<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>
<table>
    <tr>
        <th>球员</th>
        <th>姓名</th>
        <th>位置</th>
        <th>年龄</th>
        <th>球队</th>
        <th>得票数</th>
        <th>操作</th>
    </tr>
<!--过滤-->
    <tr ng-repeat="item in users|filter:{name:chazhao}|filter:ageFilter">
        <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="count(item)">投票</button></td>
    </tr>
</table>
</body>
</html>