<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  table{
  border-collapse: collapse;
  }
  td{
  padding: 10px;
  border: 1px solid #000;
  }
  </style>
  <script src="../angular-1.5.5/angular.min.js"></script>
  <script>
  var myapp=angular.module("myapp",[]);
  myapp.controller("myCtrl",function($scope){
  $scope.data=[{
  name:"张三",
  wz:"控球后卫",
  num:"11",
  ps:"999"
  },{
  name:"李四",
  wz:"大前锋",
  num:"21",
  ps:"888"
  },{
  name:"王五",
  wz:"小前锋",
  num:"23",
  ps:"777"
  },{
  name:"赵六",
  wz:"中锋",
  num:"10",
  ps:"666"
  },{
  name:"周七",
  wz:"得分后卫",
  num:"1",
  ps:"555"
  }];
  $scope.search="";
  $scope.search2="";
  $scope.$watch("search",function(value){
  console.log(value);
  if(value.indexOf("枪")!=-1){
  alert("包含敏感字");
  $scope.search="";
  }else{
  $scope.search2=$scope.search;
  }
  });
  //选择排序部分
  $scope.sort="--请选择--";
  //$scope.revers=null;
  $scope.fun=function(){
  if($scope.sort!="--请选择--"){
  if($scope.sort=="票数倒序"){
  $scope.revers=true;
  }else if($scope.sort=="票数正序"){
  $scope.revers=false;
  }
  }
  };
  //新增球员部分
  $scope.show=false;
  $scope.add=function(){
  $scope.show=true;
  };
  $scope.push=function(){
  for(var i=0;i<$scope.data.length;i++){
  if($scope.name==$scope.data[i].name){
  alert("重复");
  return;
  }
  }
  $scope.data.push({name:$scope.name,wz:$scope.wz,num:$scope.num,ps:$scope.ps});
  };
  console.log(angular.isNumber(0));
  })
  </script>
  </head>
  <body ng-app="myapp" ng-controller="myCtrl">
  <span>查询</span>
  <input type="text" ng-model="search">
  <span>排序</span>
  <select ng-model="sort" ng-change="fun()">
  <option>--请选择--</option>
  <option>票数倒序</option>
  <option>票数正序</option>
  </select><br/>
  <button ng-click="add()">新增球员</button>
  <table>
  <thead>
  <tr>
  <td>姓名</td>
  <td>位置</td>
  <td>球号</td>
  <td>票数</td>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="item in data|filter:search2|orderBy:'ps':revers">
  <td>{{item.name}}</td>
  <td>{{item.wz}}</td>
  <td>{{item.num}}</td>
  <td>{{item.ps}}</td>
  </tr>
  </tbody>
  </table>
  <table ng-show="show">
  <tr>
  <td>姓名</td>
  <td><input type="text" ng-model="name"></td>
  </tr>
  <tr>
  <td>位置</td>
  <td><input type="text" ng-model="wz"></td>
  </tr>
  <tr>
  <td>球号</td>
  <td><input type="text" ng-model="num"></td>
  </tr>
  <tr>
  <td>票数</td>
  <td><input type="text" ng-model="ps"></td>
  </tr>
  <tr>
  <td colspan="2"><button ng-click="push()">添加</button></td>
  </tr>
  </table>
  </body>
 

</html>

.

.

..

...

.

.....

..

..

.

.

.

.

.

.

.

.

.

.

.

..

angular js 正序倒叙的更多相关文章

  1. js操作table倒叙显示序号的问题

    今天遇到一奇葩问题,就是在js添加table时,序号是倒叙显示的,而且数据库查出来时正序的,为什么显示是倒叙的呢? 我百度一番,终于有了结果: var newRow=table.insertRow(- ...

  2. js 正序、倒序、按字段排序方法

    js 基础--sort方法: arrayObject.sort(sortby); 参数:定义排序规则(正序.倒序.按字段排序)的函数: 返回值:对数组的引用.请注意,数组在原数组上进行排序,不生成副本 ...

  3. angularjs ng-repeat倒叙

    <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng ...

  4. 【java基础学习一】int[]、Integer[]、String[] 排序（ 正序、倒叙）、去重

    调用: //重复项有9.5.1.2 int[] ints = new int[]{9,4,7,8,2,5,1,6,2,5,9,1}; arrayIntTest(ints); ///////////// ...

  5. JS使用Enter事件将输入的字符倒叙输出

    在JavaScript中执行当用户按下Enter键位时将用户输入的字符倒叙输出! HTML代码: <body> <form id="form1" runat=&q ...

  6. JS通过sort(),和reverse()正序和倒序

    sort()正序   var array1 = [0,1,5,10,15]; array1.sort();//结果为:0,1,10,15,5   请注意,上面的代码没有按照数值的大小对数字进行排序,要 ...

  7. compare正序与逆序

    //list:在数据查询出来的Record集合 //juli:是需要比较的字段   //实现一个Comparator接口 //后面减去前面是正序   前面减去后面是倒叙 //我这里做的一个距离排序 R ...

  8. 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 的目的是 ...

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

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

随机推荐

  1. 洛谷——P2814 家谱

    P2814 家谱 题目背景 现代的人对于本家族血统越来越感兴趣. 题目描述 给出充足的父子关系,请你编写程序找到某个人的最早的祖先. 输入输出格式 输入格式: 输入由多行组成,首先是一系列有关父子关系 ...

  2. 7-20 Windows消息队列 （25 分）（模拟水题）

    题意: 思路: 用优先队列直接模拟就OK了,另外优先队列存pair的时候比较的是first的值,实测!! 上代码: #include <iostream> #include <que ...

  3. Scrapy Item用法示例（保存item到MySQL数据库，MongoDB数据库，使用官方组件下载图片）

    需要学习的地方: 保存item到MySQL数据库,MongoDB数据库,下载图片 1.爬虫文件images.py # -*- coding: utf-8 -*- from scrapy import ...

  4. Accessoft-日期区间段查询示例,开始日期至截止日期区段查询

    Accessoft-日期区间段查询示例,开始日期至截止日期区段查询 实现功能效果如下: 示例查询开始日期为2017年3月15日到2017年3月16日的内容: sql查询语句如下: SELECT Inf ...

  5. 解析特殊格式的xml到map

    由于项目特殊,需要解析的xml文档样式特别,所以自己写了一个解析特殊xml的方法 先提供xml样式 <?xml version="1.0" encoding="UT ...

  6. 更简单高效的HTML数据提取-Xpath

    XPath 是一门在 XML 文档中查找信息的语言.XPath 用于在 XML 文档中通过元素和属性进行导航. 相比于BeautifulSoup,Xpath在提取数据时会更加的方便. 安装 在Pyth ...

  7. nyoj_102_次方求模_201308221547

    次方求模时间限制:1000 ms  |  内存限制:65535 KB 难度:3描述 求a的b次方对c取余的值 输入 第一行输入一个整数n表示测试数据的组数(n<100)每组测试只有一行,其中有三 ...

  8. C++ primer chapter 13

    拷贝 赋值 销毁 拷贝构造函数 如果一个构造函数第一个参数是自身的引用,而且任何额外参数都有默认值,则此构造函数是拷贝构造函数拷贝构造函数的第一个类型必须是引用:如果参数不是引用类型,那么调用不会成功 ...

  9. [bzoj1878][SDOI2009]HH的项链_树状数组

    HH的项链 bzoj-1878 SDOI-2009 题目大意:给定一个n个数的序列,m次查询.查询区间数的种类个数. 注释:$1\le n \le 5\cdot 10^4$,$1\le m\le 2\ ...

  10. NSThread/NSOperation/GCD 三种多线程技术

    1.iOS的三种多线程技术 1.NSThread 每个NSThread对象对应一个线程,量级较轻(真正的多线程) 2.以下两点是苹果专门开发的“并发”技术,使得程序员可以不再去关心线程的具体使用问题 ...