Display multiple comments in AngularJS

Question

Using AngularJS and try to posting multiple comments one after another. i am able to post one comment but when tried again it will replace with the existing and post the new.

Attached snippet as well, what I tried

I want like following:

1st comment submit : Hello !
2nd comment submit : Hi !

Result should be :

Hello !
Hi !

Here is my code

 var myApp = angular.module('ui.bootstrap.demo', ['ui.bootstrap']); function myCtrl($scope){ $scope.MakeVisible=!$scope.MakeVisible; $scope.showAddNoteBtn=true; $scope.userText=''; $scope.Test=''; $scope.MakeVisible=false; $scope.addNoteBtnClicked=function(){ $scope.Test=''; $scope.MakeVisible=true; $scope.showAddNoteBtn=false; } $scope.cancel=function(){ $scope.MakeVisible=false; $scope.showAddNoteBtn=true; } $scope.Submit=function(){ $scope.userText=$scope.Test; $scope.MakeVisible=false; $scope.showAddNoteBtn=true; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script> <div ng-app="ui.bootstrap.demo"> <div ng-controller="myCtrl"> <h5 style="color:#287ABE;margin-bottom:10px;">{{userText}}</h5> <h5 id="label" style="color:red;margin-bottom:10px;"></h5> <div ng-hide="MakeVisible"> </div> <div ng-show="MakeVisible"> <textarea ng-model="Test"></textarea> <input type="button" value="Submit" ng-click="Submit()"/> <input type="button" value="Cancel" ng-click="cancel()"/> </div> <div> <input ng-show='showAddNoteBtn' type="button" value="Add Note" ng-click="addNoteBtnClicked()"/> </div> </div> 

Answer 1

you need to add the comments in to a array and iterate through the array

 var myApp = angular.module('ui.bootstrap.demo', ['ui.bootstrap']); function myCtrl($scope){ $scope.MakeVisible=!$scope.MakeVisible; $scope.showAddNoteBtn=true; $scope.userText=''; $scope.Test=''; $scope.MakeVisible=false; $scope.addNoteBtnClicked=function(){ $scope.Test=''; $scope.MakeVisible=true; $scope.showAddNoteBtn=false; } $scope.cancel=function(){ $scope.MakeVisible=false; $scope.showAddNoteBtn=true; } $scope.commentArray = []; // array for storing comments $scope.Submit=function(){ $scope.commentArray.push($scope.Test); // add a comment to the array after user submit the comment $scope.MakeVisible=false; $scope.showAddNoteBtn=true; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script> <div ng-app="ui.bootstrap.demo"> <div ng-controller="myCtrl"> <h5 style="color:#287ABE;margin-bottom:10px;" ng-repeat="comment in commentArray"> {{ comment }} </h5> <h5 id="label" style="color:red;margin-bottom:10px;"></h5> <div ng-hide="MakeVisible"> </div> <div ng-show="MakeVisible"> <textarea ng-model="Test"></textarea> <input type="button" value="Submit" ng-click="Submit()"/> <input type="button" value="Cancel" ng-click="cancel()"/> </div> <div> <input ng-show='showAddNoteBtn' type="button" value="Add Note" ng-click="addNoteBtnClicked()"/> </div> </div> 

Answer 2

You use arrays and ngRepeat directive to achieve it, like in this code snippet below:

 var myApp = angular.module('ui.bootstrap.demo', ['ui.bootstrap']); function myCtrl($scope){ $scope.MakeVisible=!$scope.MakeVisible; $scope.showAddNoteBtn=true; $scope.userText=[]; $scope.Test=''; $scope.MakeVisible=false; $scope.addNoteBtnClicked=function(){ $scope.Test=''; $scope.MakeVisible=true; $scope.showAddNoteBtn=false; } $scope.cancel=function(){ $scope.MakeVisible=false; $scope.showAddNoteBtn=true; } $scope.Submit=function(){ $scope.userText.push($scope.Test); $scope.MakeVisible=false; $scope.showAddNoteBtn=true; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script> <div ng-app="ui.bootstrap.demo"> <div ng-controller="myCtrl"> <h5 style="color:#287ABE;margin-bottom:10px;" ng-repeat="t in userText">{{t}}</h5> <h5 id="label" style="color:red;margin-bottom:10px;"></h5> <div ng-hide="MakeVisible"> </div> <div ng-show="MakeVisible"> <textarea ng-model="Test"></textarea> <input type="button" value="Submit" ng-click="Submit()"/> <input type="button" value="Cancel" ng-click="cancel()"/> </div> <div> <input ng-show='showAddNoteBtn' type="button" value="Add Note" ng-click="addNoteBtnClicked()"/> </div> </div>