javascript - 在 AngularJS 中显示多条评论

Question

使用 AngularJS 并尝试相继发布多条评论。我可以发表一条评论，但再次尝试时，它将替换现有的评论并发布新的评论。

还附上了我尝试过的代码片段

我想要如下:

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

结果应该是:

Hello !
Hi !

这是我的代码

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

您需要将注释添加到数组中并迭代该数组

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>