angular 添加查询

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

<!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>姓名:<inputtype="text"ng-model="name"></div> <div>位置:<inputtype="text"ng-model="wz"></div> <div>年龄:<inputtype="text"ng-model="age"></div> <div>球队:<inputtype="text"ng-model="team"></div> <button ng-click="addNew()">添加新球员</button> </div> <h3>用户信息表</h3> <div> <input placeholder="用户名查询" 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><imgsrc="{{user.url}}"></td> <td>{{user.name}}</td> <td>{{user.wz }}</td> <td>{{user.age}}</td> <td>{{user.qd }}</td> <td>{{user.page}}</td> <td><buttonng-click="add(user)">投票</button></td> </tr> </tbody> </table> </div> </body> </html>

阅读全文

0 0

angular 添加 查询

angular 添加查询