首页 > 代码库 > angular实现动态的留言板案例
angular实现动态的留言板案例
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul>li{ list-style: none; display: inline-block; } </style> <script src="http://www.mamicode.com/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实现动态的留言板案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。