<!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. 入口文件 index.php

    一. 运行流程 The index.php serves as the front controller, initializing the base resources needed to run ...

  2. auto类型推导

    引言 auto : 类型推导. 在使用c++的时候会经常使用, 就像在考虑STL时迭代器类型, 写模板的时候使用auto能少写代码, 也能帮助我们避免一些隐患的细节. auto初始化 使用auto型别 ...

  3. 微信小程序·前端-锦囊

    ========================== flex[盒子]   display: flex; flex-direction: column; [从上到下排列]↓ justify-conte ...

  4. BUPT2017 springtraining(16) #6 ——图论

    题目链接 A.容易发现最后字符的对应都是一对一的 或者说我们没办法出现最后多对一或者一对多的情况 所以只要算出 ‘a’ - 'z' 每个字符最后对应的字符即可 #include <cstdio& ...

  5. springMVC+springJDBC+Msql注解模式

    最近基于Spring4.X以上的版本写了一个springMVC+springJDBC+Msql注解模式的一个项目,之中也遇到过很多问题 ,为了防止以后遇到同样问题现记录一下知识点以及详细配置. 首先我 ...

  6. 联赛前集训日记Day2

    考试 倒数第二,我已经废了= = T1 那么水的点转区间都看不出来 T2 裸的线段树生打了个啥都不是的分块 T3 枚举想骗spj的部分分,结果啥都没有 GG 刷题 改题改的也是心累,现在蒙的要死 生活 ...

  7. Color the ball 线段树 区间更新但点查询

    #include<iostream> #include<cstdio> #include<cmath> #include<cstring> #inclu ...

  8. github的submodel错误

    原文地址 简要:直接把github上的仓库删除重建,本地的仓库也删除重建,再重新上传就OK了 最近想整理一下工作室官网的东西,那是一个用github pages写的网站,在上传一些post文章的时候, ...

  9. spring入门笔记

    这是我自己学习韩顺平老师spring视频的笔记,个人认为初学spring的韩顺平老师的讲的很好,比较通俗易懂,资源地址我已经给了,可以自己配合视频看.主要介绍了ioc和aop,这也是spring框架最 ...

  10. Spring MVC中<mvc:annotation-driven />和<context:annotation-config />的区别分析

    个人最简单的使用理解: <mvc:annotation-driven />是管理静态资源的,比如静态页面,返回JSON这些. <context:annotation-config / ...