angular js 正序倒叙
| <!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> . . ..
... .
.....
..
.. . . . . . . . . . . .
..
|
