<!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. Codeforces Round #467 Div.2题解

    A. Olympiad time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...

  2. uva10082 WERTYU (Uva10082)

    A common typing error is to place the hands on the keyboard one row to the right of the correct posi ...

  3. Linux之iptables(四、网络防火墙及NAT)

    网络防火墙 iptables/netfilter网络防火墙: (1) 充当网关 (2) 使用filter表的FORWARD链 注意的问题: (1) 请求-响应报文均会经由FORWARD链,要注意规则的 ...

  4. PHP常用系统设置整理

    1.设置时间脚本执行时间 set_time_limit(0); 2.设置最大执行内存 ini_set('memory_limit','1024M');//设置内存 memory_get_usage() ...

  5. opcache的配置

    ; Enable Zend OPcache extension module zend_extension=opcache.so ; Determines if Zend OPCache is ena ...

  6. from __future__ import absolute_import的作用

    关于这句from future import absolute_import的作用: 直观地看就是说"加入绝对引入这个新特性".说到绝对引入,当然就会想到相对引入.那么什么是相对引 ...

  7. Arduino 串口通讯参考笔记 - Serial 类库及相关函数介绍

    声明: 本ID发布的所有文章及随笔均为原创,可随意转载,单转载文章必须注明作者 aiyauto 及包含原文出处地址 http://www.cnblogs.com/aiyauto/p/7071712.h ...

  8. 【codeforces 514E】Darth Vader and Tree

    [题目链接]:http://codeforces.com/problemset/problem/514/E [题意] 无限节点的树; 每个节点都有n个儿子节点; 且每个节点与其第i个节点的距离都是ai ...

  9. mode-c++

    /*感谢机房JYW的友情馈赠*/#include <iostream> #include <cstdio> #include <cstring> #include ...

  10. [bzoj4636]蒟蒻的数列_线段树

    蒟蒻的数列 bzoj-4636 题目大意:给定一个序列,初始均为0.n次操作:每次讲一段区间中小于k的数都变成k.操作的最后询问全局和. 注释:$1\le n\le 4\cdot 10^4$. 想法: ...