angularjs之公告墙

最新推荐文章于 2018-12-21 11:02:56 发布

love_mysunshine

最新推荐文章于 2018-12-21 11:02:56 发布

阅读量229

点赞数

本文链接：https://blog.csdn.net/love_mysunshine/article/details/78242810

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导包-->
    <script src="angular-1.5.5/angular.min.js"></script>
    <script>
        /*声明模块*/
        var myapp=angular.module("myapp",[]);
        /*声明数组*/
        var data={
            items:[
                {action:"jjjjjj"},
                {action:"hhhhhh"}
            ]
        };
        /*为模块添加控制器*/
        myapp.controller("myCtrl",function ($scope) {
            /*初始化数组*/
            $scope.data=data;
            /*过滤：如果发布含有XX，将添加不上*/
            $scope.addItem=function(){
                   if($scope.add.indexOf("xx")<0){
                       $scope.data.items.push({'action':$scope.add})
                       $scope.add="";
                   }else {
                       return;
                   }
               }


        })
    </script>
    <style>
        .kuang{
            width: 200px;
            height: 200px;
            border: 1px solid;
            line-height: 5px;
        }
        li{
            list-style: none;
            width: 80px;
            height: 40px;
        }
        ul{
            display: block;
        }
    </style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h1>公告墙</h1>
<div class="kuang">
    <ul>
<li ng-repeat="item in data.items">{{item.action}}</li>
    </ul>
</div>
输入框<input type="text" ng-model="add"><br>
<button ng-click="addItem()">发布</button>
</body>
</html>