angularJs 正 到 排序
阿新 • • 發佈：2019-02-11
| <!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> |
| 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><inputtype="text"ng-model="name"></td> |
| </tr> |
| <tr> |
| <td>位置</td> |
| <td><inputtype="text"ng-model="wz"></td> |
| </tr> |
| <tr> |
| <td>球號</td> |
| <td><inputtype="text"ng-model="num"></td> |
| </tr> |
| <tr> |
| <td>票數</td> |
| <td><inputtype="text"ng-model="ps"></td> |
| </tr> |
| <tr> |
| <td colspan="2"><buttonng-click="push()">新增</button></td> |
| </tr> |
| </table> |
| </body> |
| </html> |