angularjs之公告墙

来源：互联网发布：手机上写小说的软件编辑：程序博客网时间：2024/04/28 12:31
<!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>
阅读全文
0 0