angularjs添加和排序

最新推荐文章于 2018-10-18 19:47:32 发布
原创最新推荐文章于 2018-10-18 19:47:32 发布 · 419 阅读
CC 4.0 BY-SA版权
本文介绍了一个使用AngularJS实现的球员信息管理系统，该系统能够展示球员的姓名、位置、球号和票数等信息，并提供了搜索、排序及新增球员的功能。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>第三周</title>
    <style type="text/css">
        .even_cls {
            background-color: #fff;
        }
        .odd_cls {
            background-color: #999;
        }
    </style>
    <script type="text/javascript">
        var example_data = [
            {
                xing_ming: "张三",
                wei_zhi: "控球后卫",
                qiu_hao: 11,
                piao_shu: 999
            },
            {
                xing_ming: "李四",
                wei_zhi: "大前锋",
                qiu_hao: 21,
                piao_shu: 888
            },
            {
                xing_ming: "王五",
                wei_zhi: "小前锋",
                qiu_hao: 23,
                piao_shu: 777
            },
            {
                xing_ming: "赵六",
                wei_zhi: "中锋",
                qiu_hao: 10,
                piao_shu: 666
            },
            {
                xing_ming: "周七",
                wei_zhi: "得分后卫",
                qiu_hao: 1,
                piao_shu: 555
            }
        ];

        var app = angular.module("myApp", []);

        app.constant("EXAMPLE_DATA", example_data);

        app.controller("myCtrl", function ($scope, EXAMPLE_DATA) {
            $scope.data = EXAMPLE_DATA;
            $scope.add_qiu_yuan_form = false;

            $scope.showAddQiuYuanForm = function () {
                $scope.add_qiu_yuan_form = true;
            };

            $scope.submitQiuYuanForm = function () {
                if ($scope.xing_ming == undefined || $scope.xing_ming == "") {
                    // alert("姓名不能为空！");
                    return;
                }

                if ($scope.wei_zhi == undefined || $scope.wei_zhi == "") {
                    return;
                }

                if ($scope.qiu_hao == undefined || $scope.qiu_hao == "") {
                    return;
                }
                if ($scope.piao_shu == undefined || $scope.piao_shu == "") {
                    return;
                }
                if (!/^\d+$/.test($scope.qiu_hao)) {
                    alert("球号必须是整数！");
                    return;
                }
                if (!/^\d+$/.test($scope.piao_shu)) {
                    alert("票数必须是整数！");
                    return;
                }
                $scope.data.push(
                        {
                            xing_ming: $scope.xing_ming,
                            wei_zhi: $scope.wei_zhi,
                            qiu_hao: $scope.qiu_hao,
                            piao_shu: $scope.piao_shu
                        }
                );
                $scope.xing_ming = "";
                $scope.wei_zhi = "";
                $scope.qiu_hao = "";
                $scope.piao_shu = "";
                $scope.add_qiu_yuan_form = false;
            };

            $scope.search = function () {
                if ($scope.search_xing_ming_value == undefined || $scope.search_xing_ming_value == "") {
                    $("tr").show();
                    return;
                }

                if ($scope.search_xing_ming_value == "张三") {
                    alert("敏感词");
                    return;
                }

                for (var idx in $scope.data) {
                    var trIdx = parseInt(idx) + 1;
                    if ($scope.search_xing_ming_value == $scope.data[idx].xing_ming) {
                        $("tr:eq(" + trIdx + ")").show();
                    } else {
                        $("tr:eq(" + trIdx + ")").hide();
                    }
                }
            };

            $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-controller="myCtrl">

查询：<input type="text" ng-model="search_xing_ming_value" ng-change="search()"/>

<select ng-model="search_piao_shu_value">
    <option value="">排序</option>
    <option value="1">票数正序</option>
    <option value="2">票数倒序</option>
</select><br/>

<button ng-click="showAddQiuYuanForm()">新增球员</button>

<table border="1">
    <thead>
    <tr style="background-color: #666">
        <th>姓名</th>
        <th>位置</th>
        <th>球号</th>
        <th>票数</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="qiu_yuan in data | orderBy: 'piao_shu': order2(search_piao_shu_value)"
        ng-class="{even_cls: !$even, odd_cls: !$odd}">
        <td>{{ qiu_yuan.xing_ming | mgc: '张三' }}</td>
        <td ng-bind="qiu_yuan.wei_zhi"></td>
        <td ng-bind="qiu_yuan.qiu_hao"></td>
        <td ng-bind="qiu_yuan.piao_shu"></td>
    </tr>
    </tbody>
</table>

<div>敏感词：张三</div>

<div ng-show="add_qiu_yuan_form">
    <p>添加球员</p>

    <p>姓名：<input type="text" ng-model="xing_ming"/></p>

    <p>位置：<input type="text" ng-model="wei_zhi"/></p>

    <p>球号：<input type="text" ng-model="qiu_hao"/></p>

    <p>票数：<input type="text" ng-model="piao_shu"/></p>

    <p>
        <button ng-click="submitQiuYuanForm()">提交</button>
    </p>
</div>
</body>
</html>