<!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. Maven学习总结（9）——使用Nexus搭建Maven私服

    1 . 私服简介 私服是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构件.有了私服之后,当 Maven 需要下载构件时,直接请求私服,私服上存在则下载到本地仓库:否则,私服请求外部 ...

  2. TestNG的安装和使用

    一.TestNG安装 打开这个网址:https://marketplace.eclipse.org/content/testng-eclipse#group-external-install-butt ...

  3. Vue2构建项目实战

    转载整理自http://blog.csdn.net/fungleo/article/details/77575077 vue构建单页应用原理 SPA 不是指水疗.是 single page web a ...

  4. NYIST 760 See LCS again

    See LCS again时间限制:1000 ms | 内存限制:65535 KB难度:3 描述There are A, B two sequences, the number of elements ...

  5. Leetcode 49.字母异位词分组

    字母异位词分组 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", " ...

  6. noip模拟赛 Chtholly Nota Seniorious

    题目背景 大样例下发链接: https://pan.baidu.com/s/1nuVpRS1 密码: sfxg こんなにも.たくさんの幸せをあの人に分けてもらった だから.きっと 今の.私は 谁が何と ...

  7. springboot优雅关机

    Spring boot 2.0 之优雅停机  rabbitGYK 关注 2018.05.20 18:41* 字数 1794 阅读 2638评论 0喜欢 22 spring boot 框架在生产环境使用 ...

  8. 嵌入式linux和嵌入式android系统有什么区别和联系?

    转自:http://bbs.eeworld.com.cn/thread-430437-1-1.html 这个问题很多人问,尤其是初入嵌入式的菜鸟.其实大家都认为android是java,已经不是lin ...

  9. hdu_1020_Encoding_201310172120

    Encoding Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  10. [bzoj2802][Poi2012]Warehouse Store_贪心_堆

    Warehouse Store bzoj-2802 Poi-2012 题目大意:一家商店的连续n天内,每一天会进货$a_i$个,有且只有一个客人回来买$b_i$个,问至多满足多少人. 注释:$1\le ...