<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS實現下拉框排序/添加數據/查詢數據/敏感字符過濾</title> <script src="AngularJS/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp",[]); app.controller("myCtrl",function ($scope) { $scope.arr = [{ name:"張三", address:"控球后衛", qiuhao:11, piaoshu:999 },{ name:"李四", address:"大前鋒", qiuhao:21, piaoshu:888 },{ name:"王五", address:"小前鋒", qiuhao:23, piaoshu:777 },{ name:"趙六", address:"中鋒", qiuhao:10, piaoshu:666 },{ name:"周七", address:"得分後衛", qiuhao:1, piaoshu:555 }]; //實現添加球員的操作 $scope.toggle = function () { $scope.myVar = !$scope.myVar; } $scope.sub = function (name1,address,qiuhao,piaoshu) { var flag = true; if(name1 == null || name1 == "" && address == null || address == "" && qiuhao == null || qiuhao == "" && piaoshu == null || piaoshu == ""){ alert("內容不可爲空"); }else{ for(i in $scope.arr){ if($scope.arr[i].name == name1){ alert("chongfu!"); flag = false; } } if(flag){ $scope.arr.push({ name:name1, address:address, qiuhao:qiuhao, piaoshu:piaoshu }) } } } //敏感字符過濾 $scope.selectName = ""; $scope.search = ""; $scope.$watch("selectName",function (value) { if(value.indexOf("敏感字符")!=-1){//如果包含敏感字符過濾掉 $scope.selectName =""; }else{ $scope.search = $scope.selectName; } }) }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> 查詢<input type="text" style="width: 300px" ng-model="selectName" placeholder="請輸入名字查詢"> 排序<select style="width: 300px" ng-model="order"> <option value="">--請選擇排序--</option> <option value="piaoshu">票數正序</option> <option value="-piaoshu">票數倒序</option> </select><br><br> <button style="background-color: #7ee4ff" ng-click="toggle()">新增球員</button> <table border="1 solide blue" cellpadding="5px" cellspacing="0px" ng-if="myVar"> <tr> <td><input type="text" ng-model="name1" placeholder="姓名"></td> <td><input type="text" ng-model="address" placeholder="位置"></td> <td><input type="text" ng-model="qiuhao" placeholder="球號"></td> <td><input type="text" ng-model="piaoshu" placeholder="票數"></td> <td><button ng-click="sub(name1,address,qiuhao,piaoshu)">submit</button></td> </tr> </table><br><br><br> <table border="1 solide blue" cellpadding="5px" cellspacing="0px" width="712px"> <tr> <th>姓名</th> <th>位置</th> <th>球號</th> <th>票數</th> </tr> <tr ng-repeat="i in arr | filter:{name:search} | orderBy:order"> <td><center>{{i.name}}</center></td> <td><center>{{i.address}}</center></td> <td><center>{{i.qiuhao}}</center></td> <td><center>{{i.piaoshu}}</center></td> </tr> </table> </body> </html>
