（angularjs）模板

最新推荐文章于 2023-03-20 21:38:04 发布

迷人的脚毛

最新推荐文章于 2023-03-20 21:38:04 发布

阅读量319

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/qq_40090482/article/details/78345418

版权

angularjs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

上代码：

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>模拟题</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script src="angular-1.3.0.js"></script>
    <script src="jquery.1.12.4.js"></script>
    <style type="text/css">
        .even_cls {
            background-color: #fff;
        }

        .odd_cls {
            background-color: #999;
        }
    </style>
    <script>

        var app=angular.module("myapp",[]);
        //敏感字符过滤
        app.filter("span",function () {
            return function (msg,flag) {
                var aa=flag.split("|");
                for (var i in aa){
                    if(msg.indexOf(aa[i])>=0){
                        return "违规字符";
                    }
                }
                return msg;
            }
        })

        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==""||$scope.name==undefined||
                    $scope.password==""||$scope.password==undefined||
                    $scope.age==""||$scope.age==undefined||
                    $scope.sex==""||$scope.sex==undefined){
                    alert("请填写未填写项");
                }else{
                    //当点击时给数组里面添加
                    $scope.data.push({
                        name: $scope.name,
                        password: $scope.password,
                        age: $scope.age,
                        sex: $scope.sex,
                    })
                    //添加后清空
                    $scope.name="";
                    $scope.password="";
                    $scope.age="";
                    $scope.sex="";

                    //点击提交后就隐藏框
                    $scope.show=false;

                }

            };
            //单击添加时 就显示框
            $scope.tian=function () {
                $scope.show=true;
            };



            $scope.order = function () {
                if ($scope.search_piao_shu_value == 1) {
                    $scope.data.sort(function (json1, json2) {
                        return (json1.sex > json2.sex) ? 1 : -1;
                    });
                } else if ($scope.search_piao_shu_value == 2) {
                    $scope.data.sort(function (json1, json2) {
                        return (json1.sex < json2.sex) ? 1 : -1;
                    });
                }
            };
        })
    </script>


</head>
<body ng-controller="myctrl">
<div>
    查询
    <input type="text" ng-model="gen" placeholder="姓名查询" />
    排序
    <!--<select ng-model="pai">-->
    <!--<option>票数倒序</option>-->
    <!--<option>票数正序</option>-->
    <!--</select>-->
    <select ng-model="search_piao_shu_value" ng-change="order()">
        <option value="1">票数正序</option>
        <option value="2">票数倒序</option>
    </select><br/>

</div>
<br>
<button ng-click="tian()" style="width: 150px; height: 40px; background-color: deepskyblue; " >新增球员</button>
<br><br>
<table border="1" style="width: 400px">
    <tr style="background-color: #666">
        <td>姓名</td>
        <td>位置</td>
        <td>球号</td>
        <td>票数</td>
    </tr>
    <tr ng-repeat="user in data| filter:{name:gen}" ng-class="{even_cls: !$even, odd_cls: !$odd}">
        <td>{{user.name}}</td>
        <td>{{user.password}}</td>
        <td>{{user.age}}</td>
        <td>{{user.sex}}</td>
    </tr>
</table>

<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

收藏

觉得还不错? 一键收藏
0
评论
（angularjs）模板

上代码：html>html lang="en" ng-app="myapp">head> meta charset="UTF-8"> title>模拟题title> meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=
复制链接

扫一扫