AngularJS的添加和区间的判断（过滤器）

来源：互联网发布：大数据4v 编辑：程序博客网时间：2024/06/06 04:57

molikaoshi.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../angular-1.5.5/angular.js"></script>    <script src="molikaoshi.js"></script></head><body ng-app="myapp" ng-controller="myCtrl"><h1>添加新的球员</h1><p>姓名：<input type="text" ng-model="xm"/></p><p>位置：<input type="text" ng-model="wz"/></p><p>年龄：<input type="text" ng-model="nl"/></p><p>球队：<input type="text" ng-model="qy"/></p><button ng-click="add()">添加新的球员</button><h3>用户信息表</h3><input type="text" placeholder="用户名查询" ng-model="mh"/> 年龄：<select ng-model="ss">    <option>--请选择--</option>    <option>18-25</option>    <option>26-35</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:mh|filter:agefilter">    <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="tp($index)">投票</button></td>    </tr></table></body></html>

molikaoshi.js

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.xm="";    $scope.wz="";    $scope.qy="";    $scope.nl="";    //添加的点击事件     $scope.add=function () {         //往数组中添加输入的内容         $scope.users.unshift({'name':$scope.xm, 'wz': $scope.wz, "age":$scope.nl, "qd":$scope.qy, "page":1712,'url':"images/7.png"})     }     //投票的功能    $scope.tp=function (index) {        $scope.users[index].page++;    }    //模糊查询    $scope.mh="";     //按年龄区域查询     $scope.ss="--请选择--";     $scope.agefilter=function (item) {         if($scope.ss!="--请选择--"){             $scope.st=$scope.ss;             var arr=$scope.st.split("-");             var min=arr[0];             var max=arr[1];             if(item.age<min||item.age>max){                return false;             }else{                 return true;             }         }else {             return true;         }     }})

阅读全文

0 0