（angularjs）数据的增查（添加用户，查询名字，实现排序，判断非空，是否是数字，是否重名，敏感字符）

来源：互联网发布：中国人知乎编辑：程序博客网时间：2024/05/16 01:54
上图片：
上代码：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>模拟</title>    <script src="angular-1.3.0.js"></script>    <style type="text/css">        .even_cls {            background-color: #fff;        }        .odd_cls {            background-color: #999;        }    </style>    <script>        var app=angular.module("myapp",[]);        app.controller("myctrl",function ($scope) {            $scope.data = [                {                    name: "张三",                    password: "控球后卫",                    age: 11,                    sex: 999                },                {                    name: "李四",                    password: "大前锋",                    age: 21,                    sex: 888                },                {                    name: "王五",                    password: "小前锋",                    age: 23,                    sex: 777                },                {                    name: "赵六",                    password: "中峰",                    age: 10,                    sex: 666                },                {                    name: "周七",                    password: "得分后卫",                    age: 1,                    sex: 555                }            ];//====================================================            //单击进行添加            $scope.add=function () {                if ($scope.name == undefined || $scope.name == "") {                     alert("姓名不能为空！");                    return;                }                if ($scope.password == undefined || $scope.password == "") {                    alert("位置不能为空！");                    return;                }                if ($scope.age == undefined || $scope.age == "") {                    alert("球号不能为空！");                    return;                }                if ($scope.sex == undefined || $scope.sex == "") {                    alert("票数不能为空！");                    return;                }                if (!/^\d+$/.test($scope.age)) {                    alert("球号必须是整数！");                    return;                }                if (!/^\d+$/.test($scope.sex)) {                    alert("票数必须是整数！");                    return;                }                //当点击时给数组里面添加   进行for循环判断                 for(var i=0;i<$scope.data.length;i++){                    //如果数组里的数据和要添加的输入框的数据相同就不让添加     主要是判断重名的效果                    if($scope.data[i].name == $scope.name){                        alert("该球员已存在")                        break;                    }else                    if(i==$scope.data.length-1) {                    //添加数据                        $scope.data.push({                            name: $scope.name,                            password: $scope.password,                            age: $scope.age,                            sex: $scope.sex,                        })                        break;                    }            }                //添加后清空                $scope.name="";                $scope.password="";                $scope.age="";                $scope.sex="";                //点击提交后就隐藏框                $scope.show=false;            };            //单击添加时 就显示框            $scope.tian=function () {                $scope.show=true;            }            //==========================================            //创建一个新的数组    实现查询后列表变化   本页面写了俩个查询方法所以这个注释掉的比较麻烦  但是都可以用//            var old_data = $scope.data;//            $scope.searchByName = function () {//                $scope.data = [];//                for (var i in old_data) {//                    //如果输入的值和就数组的值相等就放入新数组中//                    if (old_data[i].name == $scope.s_name) {//                        $scope.data.push(old_data[i]);//                    }//                }//            };            //排序   正序和倒序            $scope.order2 = function (num) {                if (num == "") {                    return;                }                return (parseInt(num) == 2) ? true : false;            }        })        //敏感字符        app.filter("mgc", function () {            return function (msg, flag) {                return msg.replace(flag, "***");            };        });    </script></head><body ng-app="myapp" ng-controller="myctrl"><div>    查询 <br>    <input type="text" ng-model="s_name"  ng-change="searchByName()"   />    排序    <select ng-model="paixu">        <option value="">排序</option>        <option value="1">票数正序</option>        <option value="2">票数倒序</option>    </select></div><div>    <button style="background-color:#337AB7;" ng-click="tian()">新增球员</button></div><div>    <table border="1">        <tr style="background-color: #666">            <td>姓名</td>            <td>位置</td>            <td>球号</td>            <td>票数</td>        </tr>        <!--这里面写了俩个过滤器   一个是正序和倒序，   一个是查询名字的   这个查询过滤器比较简单-->        <tr ng-repeat="user in data | orderBy: 'sex': order2(paixu) | filter:{name:s_name}"            ng-class="{even_cls: !$even, odd_cls: !$odd}">           <!--过滤敏感字符的-->            <td>{{user.name | mgc: '习近平' }}</td>            <td>{{user.password}}</td>            <td>{{user.age}}</td>            <td>{{user.sex}}</td>        </tr>    </table></div><div ng-show="show">    <!--实现添加球员页面-->    <table border="1">        <tr>            <td>姓名：</td>            <td><input type="text" ng-model="name"></td>        </tr>        <tr>            <td>位置：</td>            <td><input type="text" ng-model="password"></td>        </tr>        <tr>            <td>球号：</td>            <td><input type="text" ng-model="age"></td>        </tr>        <tr>            <td>票数：</td>            <td><input type="text" ng-model="sex"></td>        </tr>        <tr>            <td colspan="2" align="center">                <button ng-click="add()">提交</button>            </td>        </tr>    </table></div></body></html>
阅读全文
0 0
（angularjs） 数据的增查（添加用户，查询名字，实现排序，判断非空 ，是否是数字，是否重名，敏感字符）

（angularjs）数据的增查（添加用户，查询名字，实现排序，判断非空，是否是数字，是否重名，敏感字符）
