<!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. P2080 增进感情

    题目背景 小明和小红的感情,是慢慢发展起来的. 题目描述 他们对对方分别有一个好感值.定义两人的亲密程度为两人的好感值之和. 如果他们的亲密程度达到V,则他们将走到一起.他们以后的生活将取决于两人的好 ...

  2. UNIX C 总结

    --day01--王建立QQ:2529866769今天的内容:一.计算机的框架什么是操作系统?(汽车)加油系统 油门 用户跟加油子系统交互的窗口.(接口)方向系统 方向盘 用户跟方向系统的交互接口.导 ...

  3. 名字竞技场 V3.0

    更新内容 1.加入新boss,更高的难度. 2.支持组队模式勒! 3.针对大家反应的人物属性算法进行了修改,现在人物属性更多的取决于名字而不是随机数 4.用户界面优化 INF.代码拿走赞留下,不然你赢 ...

  4. LIS(两种方法求最长上升子序列)

    首先得明白一个概念:子序列不一定是连续的,可以是断开的. 有两种写法: 一.动态规划写法 复杂度:O(n^2) 代码: #include <iostream> #include <q ...

  5. 在Python脚本中调用Django环境（方便、右键运行，可用于ORM测试）

    随便创建一个py文件即可: import os if __name__ == '__main__': os.environ.setdefault("DJANGO_SETTINGS_MODUL ...

  6. Linux下源码安装Peach-2.3.8教程

    在peach文件夹下运行 python peach.py ./samples/HelloWorld.xml 提示先安装4Suite-XML. 根据提示在dependences文件夹下安装,出现两次错误 ...

  7. Python - 面对对象(进阶)

    目录 Python - 面对对象(进阶) 类的成员 一. 字段 二. 方法 三. 属性 类的修饰符 类的特殊成员 Python - 面对对象(进阶) 类的成员 一. 字段 字段包括:普通字段和静态字段 ...

  8. springcloud(四)：Eureka客户端公共组件打包方式

    ,      一.前言  各位大佬应该知道,在大型项目中都需要有数据传输层,一般项目都采用的是MVC结构,如果有10个表,则会创建10个实体类,在各个层之间应该使用实体类传递数据: 在微服架构中,也许 ...

  9. 请问spfa+stack 和spfa+queue 是什么原理

    一个是bfs加迭代 一个是dfs加迭代 请问迭代是什么 就是不断地做,做到没有更优的解为止 或者是不断得做,做到逼近答案为止.. 栈比队列更快更节省空间

  10. nyoj_111_分数加减法_201311281341

    分数加减法 时间限制:3000 ms  |           内存限制:65535 KB 难度:2   描述 编写一个C程序,实现两个分数的加减法   输入 输入包含多行数据 每行数据是一个字符串, ...