<!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>姓名:<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="用户名查询" size="10" />
  <!--<input ng-model="ageSize" placeholder="年龄查询(a-b)" 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><img src="{{user.url}}"></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="add(user)">投票</button></td>
  </tr>
  </tbody>
  </table>
  </div>
  </body>
  </html>

angular js 球星的更多相关文章

  1. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  2. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  3. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  4. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  5. Angular.js实现折叠按钮的经典指令.

    var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...

  6. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  7. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  8. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  9. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

随机推荐

  1. 18清明校内测试T3

    扫雷(mine) Time Limit:1000ms   Memory Limit:128MB 题目描述 rsy最近沉迷于一款叫扫雷的游戏. 这个游戏是这样的.一开始网格上有n*m个位置,其中有一些位 ...

  2. Luogu P2922 秘密消息

    原题 P2922 [USACO08DEC]秘密消息Secret Message 题目描述 Bessie is leading the cows in an attempt to escape! To ...

  3. js用正则表达式将英文引号字符替换为中文引号字符

    <script> $(function(){ var str='"我是英文版的引号",我要变成"中文版的引号"'; alert(replaceDqm ...

  4. 基于supervisor秒级Laravel定时任务

    背景介绍 公司需要实现X分钟内每隔Y秒轮训某个接口,Linux自带的crontab貌似只精确到分钟,虽然可以到精确到秒,但是并不满足需求. 选型 公司项目都是 基于 Laravel 框架,所以这个没得 ...

  5. 6.4.1 标准库 os、os.path 与 shutil 简介

    os模块除了提供使用操作系统功能和访问文件系统的简便方法之外,还提供了大量文件与文件夹操作的方法,如下表所示. 方法 功能说明 access(path,mode) 按照 mode 指定的权限访问文件 ...

  6. 6.3.3 使用 shelve 模块操作二进制文件

    Python标准库shelve也提供了二进制文件操作的功能,可以像字典赋值一样来写入二进制文件,也可以像字典一样读取二进制文件,有点类似于NoSQL数据库MongoDB. import shelve ...

  7. controller 接口写法

    import org.apache.commons.io.IOUtils; import javax.servlet.ServletInputStream; @RequestMapping(" ...

  8. N天学习一个linux命令之rsync

    用途 主要用于本地和远程主机同步文件 特性 1 使用增量传输算法(delta-transfer algorithm) 2 支持ssh,rsync协议 3 可以用于本地同步文件 4 本地和远程主机都需要 ...

  9. post and get

    POST和GET是Web编程中的两个术语,他们是通过URI访问resource的两种方式.简单的说, GET 是把要访问的资源嵌入在URI中. 假设你在一个页面 http://www.myphone. ...

  10. 【SSH之旅】一步步学习Hibernate框架（一）：关于持久化

    在不引用不论什么框架下,我们会通过平庸的代码不停的对数据库进行操作,产生了非常多冗余的可是又有规律的底层代码,这样频繁的操作数据库和大量的底层代码的反复书写极大的浪费了程序人员的书写.就在这样一种情况 ...