<!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. css3部分注意事项

    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些? 1.选择器 id选择器( # myid) 类选择器(.myclassname) 标签选择器(div, h1, p ...

  2. GitHub：创建和修改远程仓库

    创建远程仓库 首先在GitHub上创建一个仓库命名为learngit.选中public(private要钱),选中 生成README(就是markdown形式的说明文档),便于别人和自己了解仓库的作用 ...

  3. 【Codeforces 158C】Cd and pwd commands

    [链接] 我是链接,点我呀:) [题意] 让你实现Shell的cd和pwd操作 [题解] 用一个list表示当前的路径 如果路径以/开头则表示需要清空当前路径重新走路 否则在原来路径的基础上继续加就可 ...

  4. mode-c++

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

  5. Lifting the Stone 计算几何 多边形求重心

    Problem Description There are many secret openings in the floor which are covered by a big heavy sto ...

  6. Cash Machine POJ 1276 多重背包

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 35387   Accepted: 12816 Description A B ...

  7. Linux排查java程序占用cpu过高的线程代码

    分几步骤: 1.通过top,查出占用CPU过高的java进程 ,比如: pid :6666 2.通过ps -mp 6666 -o THREAD,tid,time| sort -n -k1 -r 查看此 ...

  8. 洛谷 P2965 [USACO09NOV]农活比赛The Grand Farm-off

    P2965 [USACO09NOV]农活比赛The Grand Farm-off 题目描述 Farmer John owns 3*N (1 <= N <= 500,000) cows su ...

  9. Workflow：实现一个简单的审批流程

    1. 创建一个空白的项目,在其中创建Host – Windows Console Application,Client – Windows forms Application和DataExchange ...

  10. 《JAVA程序设计》实训第一天——《猜猜看》游戏

    课程实训是做一个猜猜看的小游戏.对于对代码不熟悉不了解的我来说的确挺难的.可是我还是会努力的. import java.awt.EventQueue; import javax.swing.JFram ...