AngularJS通知栏应用-优快云博客

本文链接：https://blog.youkuaiyun.com/c_hjf/article/details/78242503

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title></title>
    <style type="text/css">
        li {
            list-style: none;
        }
        .notice_board {
            width: 512px;
            height: 256px;
            border: 1px solid lightgreen;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.filter("specialChar", function () {
            return function (value, flag) {
                var chars = flag.split("|");
                for (var i in chars) {
                    if (value.indexOf(chars[i]) >= 0) {
                        return "屏蔽该行，出现违规字符！";
                    }
                }

                return value;
            }
        });

        app.controller("myCtrl", function ($scope) {
            $scope.notices = [];
            $scope.addNotice = function () {
                $scope.notices.push($scope.notice);
                $scope.notice = "";
            }
        });
    </script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
    <div>通知栏</div>
    <div class="notice_board">
        <ul ng-repeat="value in notices">
            <li>{{ value | specialChar: '张安|李四'}}</li>
        </ul>
    </div>
    <div>
        最新通知：<input size="32" ng-model="notice"/>
    </div>
    <div>
        <button ng-click="addNotice()">发布通知</button>
    </div>
</div>
</body>

</html>

发送通知+违规字符