Показать несколько комментариев в 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; \t 
 
$scope.userText=''; 
 
$scope.Test=''; 
 
$scope.MakeVisible=false; 
 

 
    $scope.addNoteBtnClicked=function(){ 
 
\t $scope.Test=''; 
 
\t $scope.MakeVisible=true; 
 
\t $scope.showAddNoteBtn=false; 
 
} 
 
    
 
    $scope.cancel=function(){ 
 
\t $scope.MakeVisible=false; 
 
\t $scope.showAddNoteBtn=true; 
 
} 
 

 
    $scope.Submit=function(){ \t 
 
\t $scope.userText=$scope.Test; 
 
\t $scope.MakeVisible=false; 
 
\t $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"> 
 
\t <textarea ng-model="Test"></textarea> 
 
\t  <input type="button" value="Submit" ng-click="Submit()"/> 
 
\t  <input type="button" value="Cancel" ng-click="cancel()"/> 
 
    </div>   
 
\t \t \t \t \t \t \t 
 
<div> 
 
<input ng-show='showAddNoteBtn' type="button" value="Add Note" ng-click="addNoteBtnClicked()"/> 
 
</div> \t \t \t \t \t \t \t \t \t 
 
</div>

Answer 1

вам необходимо добавить комментарии в к массиву и перебирать массив

var myApp = angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
 
    
 

 
function myCtrl($scope){ 
 
    $scope.MakeVisible=!$scope.MakeVisible; 
 
$scope.showAddNoteBtn=true; \t 
 
$scope.userText=''; 
 
$scope.Test=''; 
 
$scope.MakeVisible=false; 
 
    $scope.addNoteBtnClicked=function(){ 
 
\t $scope.Test=''; 
 
\t $scope.MakeVisible=true; 
 
\t $scope.showAddNoteBtn=false; 
 
} 
 
    $scope.cancel=function(){ 
 
\t $scope.MakeVisible=false; 
 
\t $scope.showAddNoteBtn=true; 
 
} 
 

 
    $scope.commentArray = []; // array for storing comments 
 

 
    $scope.Submit=function(){ 
 
\t $scope.commentArray.push($scope.Test);  // add a comment to the array after user submit the comment 
 
\t $scope.MakeVisible=false; 
 
\t $scope.showAddNoteBtn=true; 
 
} 
 

 

 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
\t \t <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"> 
 
\t <textarea ng-model="Test"></textarea> 
 
\t  <input type="button" value="Submit" ng-click="Submit()"/> 
 
\t  <input type="button" value="Cancel" ng-click="cancel()"/> 
 
    </div>   
 
\t \t \t \t \t \t \t 
 
    <div> 
 
\t \t <input ng-show='showAddNoteBtn' type="button" value="Add Note" ng-click="addNoteBtnClicked()"/> 
 
    </div> \t \t \t \t \t \t \t \t \t 
 
    </div>

Answer 2

используется arrays и ngRepeat директивы для ее достижения, как в этом коде фрагмент ниже:

var myApp = angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
 
    
 

 
function myCtrl($scope){ 
 
$scope.MakeVisible=!$scope.MakeVisible; 
 
$scope.showAddNoteBtn=true; \t 
 
$scope.userText=[]; 
 
$scope.Test=''; 
 
$scope.MakeVisible=false; 
 

 
    $scope.addNoteBtnClicked=function(){ 
 
\t $scope.Test=''; 
 
\t $scope.MakeVisible=true; 
 
\t $scope.showAddNoteBtn=false; 
 
} 
 
    
 
    $scope.cancel=function(){ 
 
\t $scope.MakeVisible=false; 
 
\t $scope.showAddNoteBtn=true; 
 
} 
 

 
    $scope.Submit=function(){ \t 
 
\t $scope.userText.push($scope.Test); 
 
\t $scope.MakeVisible=false; 
 
\t $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"> 
 
\t <textarea ng-model="Test"></textarea> 
 
\t  <input type="button" value="Submit" ng-click="Submit()"/> 
 
\t  <input type="button" value="Cancel" ng-click="cancel()"/> 
 
    </div>   
 
\t \t \t \t \t \t \t 
 
<div> 
 
<input ng-show='showAddNoteBtn' type="button" value="Add Note" ng-click="addNoteBtnClicked()"/> 
 
</div> \t \t \t \t \t \t \t \t \t 
 
</div>