<!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. Chrome Headless模式

    在 Chrome 59 版本开始已经开始支持了 Headless 模式,也就是无界面模式,这样爬取的时候就不会弹出浏览器了,如果要使用此模式请把 Chrome 升级到 59 版本及以上,启用 Head ...

  2. Excel表格

    自己一个一个试出来,并写上解释. 还不熟练,待多写代码多练习. #!/usr/bin/python # -*- coding:utf-8 -*- import os import xlwt impor ...

  3. FORTIFY_SOURCE

    In recent years Linux distributions started treating security more seriously. Out of many security f ...

  4. 自己写spring boot starter

    自己写spring boot starter 学习了:<spring boot实战>汪云飞著 6.5.4节 pom.xml <project xmlns="http://m ...

  5. 《Android源代码设计模式解析与实战》读书笔记（十八）

    第十八章.代理模式 代理模式也称托付模式,是结构型设计模式之中的一个.是应用广泛的模式之中的一个. 1.定义 为其它对象提供一种代理以控制对这个对象的訪问. 2.使用场景 当无法或不想直接訪问某个对象 ...

  6. IIS发布后出现“如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行，将出现此问题”错误

    VS2010运行程序没有任何问题,但是发布到IIS以后,连接数据库时报错:“尝试加载 Oracle 客户端库时引发 BadImageFormatException.如果在安装 32 位 Oracle ...

  7. UINavigationController具体解释(一)

    @UINavigationControlle简单介绍: 1.导航控制器,专门管理控制器的控制器. 2.採用栈的方式管理全部controller,每一个controller管理各自的视图 @UINavi ...

  8. JAVA正則表達式小总结

    近期项目中正在做后台校验,而后台校验也基本都是使用正則表達式校验.本文做一些粗略的总结. 1.字符串长度:.{1,10},注意有一个点在{}前,表示匹配全部.'{}'之前一定是一个捕获组,因此假设有其 ...

  9. 【Linux】Ubuntu 开机默认亮度改动方法

    换了ubuntu 之后.发现开机屏幕都是"最大亮度",每次都要到设置中手动调节,非常麻烦.于是想到去改动这个设置.Google一通,别人可行的办法到我这就没用了.郁闷.最后是在st ...

  10. DBCP数据源使用

    DBCP:DataBase Connection Pool 1.须要的jar:commons-dbcp.jar  commons-pool.jar 2.把DBCP的配置文件(dbcpconfig.pr ...