在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>

Answer 2

您可以使用arrays和ngRepeat指令来实现它，就像在下面的代码段中一样：

＆＃13;

＆＃13;

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;
}



}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;