码迷,mamicode.com
首页 > 其他好文 > 详细

angular实现动态的留言板案例

时间:2016-10-02 21:31:42      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul>li{
            list-style: none;
            display: inline-block;
        }
    </style>
    <script src="angular/angular.js"></script>
</head>
<body>
<div ng-app="myTodoApp" ng-controller="myTodoCtrl">

    <h2>留言板:</h2>

    <p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

    <p>
        <button ng-click="submit()">提交</button>
        <button ng-click="reset()">重置</button>
    </p>

    <p>剩下的字符数:<span ng-bind="left()"></span></p>
    <ul ng-repeat="news in newsArry">
        <li>{{news.values}}</li>        <span>{{news.time}}</span><button ng-click="delete(news)">删除留言</button>
    </ul>

</div>


<script>
    var app=angular.module("myTodoApp",[]);
       app.controller("myTodoCtrl",function($scope){
           $scope.newsArry=[{
             values:"我要订一间房",
               time:"2016-10-01"
           }];
           $scope.message="";
           $scope.left=function(){
           return 150-$scope.message.length;
           };
           $scope.reset=function(){
             $scope.message="";
           };
           $scope.submit=function(){
               var news={};
               var times=new Date();
               news.values=$scope.message;
               news.time=times.toLocaleString();
             $scope.newsArry.push(news);
               $scope.message="";
           };
           $scope.delete=function(news){
               var index=$scope.newsArry.indexOf(news);
                $scope.newsArry.splice(index,1);
           };
       });
</script>

</body>
</html>

 

angular实现动态的留言板案例

标签:

原文地址:http://www.cnblogs.com/lsy0403/p/5927997.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!