AngularJS实现下拉框排序/添加数据/查询数据/敏感字符过滤

最新推荐文章于 2024-05-30 09:51:11 发布

Android丶ztz

最新推荐文章于 2024-05-30 09:51:11 发布

阅读量1.2k

点赞数 2

分类专栏： AngularJS

本文链接：https://blog.csdn.net/TianzhuZ/article/details/78322835

版权

AngularJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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="请输入名字查询">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    排序<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>

Android丶ztz

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS实现下拉框排序/添加数据/查询数据/敏感字符过滤

html>html lang="en">head> meta charset="UTF-8"> title>AngularJS实现下拉框排序/添加数据/查询数据/敏感字符过滤title> script src="AngularJS/angular.js">script> script type="text/javascript"> var app
复制链接

扫一扫

专栏目录