April 6, 2017
Simple Comment Box using AngularJS
Hi, friends in this post we going to see how to make a simple comment box using AngularJS. One of the best popular Javascript framework is AngularJS using this we going to do the comment box. Comment is a great way to express about any particular thing so this method should be fast because everyone hates the slow process to post the comment about any topic. So in this AngularJS will help to post a quick comment.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>SoftAOX | Simple Comment Box using AngularJS</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </head> <body ng-app> <div class="container"> <h1 align="center">Simple Comment Box using AngularJS</h1> <hr/> <div class="form-group"> <h2>Leave a Replay</h2> <form ng-controller="Controller"> <textarea class="form-control" rows="5" ng-model="cmtName" placeholder="Your Comment"></textarea> <br/> <button class="btn btn-success btn-md pull-right" ng-click='btn_post();'>Comment</button> <br/> <hr/> <h3>Comments</h3> <ul class="list-group"> <li class="list-group-item" ng-repeat="cmt in comments"> {{ cmt }} <a href="" ng-click="post_cmt($home)"><span class="glyphicon glyphicon-trash" style="color:red; float:right;"></span></a> </li> </ul> </form> </div> </div> <script type="text/javascript"> function Controller($scope) { $scope.comments = []; $scope.btn_post = function() { if ($scope.cmtName != '') { $scope.comments.push($scope.cmtName); $scope.cmtName = ""; } } $scope.post_cmt = function($home) { $scope.comments.splice($home, 1); } } </script> </body> </html> |
