<!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>
AngularJS实现下拉框排序/添加数据/查询数据/敏感字符过滤
最新推荐文章于 2024-08-01 16:27:33 发布