<!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. Java 内存模型与线程

    when ? why ? how ? what ? 计算机的运行速度和它的存储和通信子系统速度的差距太大,大量的时间都花费在磁盘I/O .网络通信或者数据库访问上.如何把处理器的运算能力"压 ...

  2. SpringBoot杂记

    一.配置文件 SpringBoot使用一个全局的配置文件,配置文件名是固定的: •application.properties •application.yml 配置文件的作用:修改SpringBoo ...

  3. JavaScript进阶----关于数字的方法，Math对象，日期对象，定时器，函数，for in

    关于数字的方法: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. Maven学习总结（7）——eclipse中使用Maven创建Web项目

    Maven学习总结(七)--eclipse中使用Maven创建Web项目 一.创建Web项目 1.1 选择建立Maven Project 选择File -> New ->Project,如 ...

  5. ActiveMQ学习总结（1）——ActiveMQ快速入门

    1.下载ActiveMQ 去官方网站下载:http://activemq.apache.org/ 2.运行ActiveMQ 解压缩apache-activemq-5.5.1-bin.zip,然后双击a ...

  6. strtod-strtod， 字符串 转 数字 函数

    strtod()会扫描参数nptr字符串,跳过前面的空格字符,直到遇上数字或正负符号才开始做转换,到出现非数字或字符串结束时('\0')才结束转换,并将结果返回.若endptr不为 NULL,则会将遇 ...

  7. [bzoj3524/2223][Poi2014]Couriers_主席树

    Couriers bzoj-3524 Poi-2014 题目大意:给定n个数的序列,询问区间内是否存在一个在区间内至少出现了(区间长度>>1)次的数.如果有,输出该数,反之输出0. 注释: ...

  8. JDK工具jstatd用法详解（转）

    jstatd,即虚拟机的jstat守护进程,主要用于监控JVM的创建与终止,并提供一个接口允许远程监控工具依附到在本地主机上运行的JVM. 用法摘要 jstatd [ options ] option ...

  9. Linux下统计某个目录的文件个数（转）

    1.统计某文件夹下文件个数,不包括子文件夹 比如:统计/home下.jpeg文件的个数 ls -l "/home" | grep ".jpeg" | wc -l ...

  10. MFC小程序003------MFC使用WebBrowser组件，在对话框中创建滚动视图，动态创建一个静态文本控件并设置鼠标单击的消息响应

    MFC小程序截图: 一.在MFC中简单使用WebBrowser的ActiveX插件的方法: 见博文:  http://blog.csdn.net/supermanking/article/detail ...