angular 追加文本框输入的内容

来源:互联网 发布:淘宝代理费 编辑:程序博客网 时间:2024/05/16 06:33
<!DOCTYPE html>
<html ng-app="myapp">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            input{margin-top: 10px;}
            button{margin-top: 10px;}
            div{border:1px solid deepskyblue;width: 500px;height: 300px;}
        </style>
        <script src="angular.js"></script>
        <script>
        angular.module('myapp',[])
               .controller('myctrl',function($scope){
                       $scope.item = '';
                       $scope.items = [];
                       //增加列表项方法
                       $scope.add = function(){
                           $scope.items.push($scope.item);
                       }
               })
        </script>
    </head>
    <body style="padding: 20px" ng-controller="myctrl">
        <p>公告墙</p>
        <div>
            <p>今天我觉得天气不错</p>
            <p>你觉得天气怎么样呢</p>
            <p ng-repeat="item in items track by $index">{{item}}</p>
        </div>
        <p><input type="text" ng-model="item" placeholder="请输入内容">
        <button ng-click="add()">发布</button></p>
    </body>
</html>