Как нажимать введенный текст в полевых вводах и textarea на json angular

Question

Как разместить комментарии с помощью Angular, когда кто-то нажимает на кнопку. Каждый раз, когда я ввожу текст в поле ввода и textarea, текст будет удален. Будет пустой блок, отображающий без имени, страны и комментариев. Введенный текст должен быть нажат после существующего json.

angular.module("forum-page", ["myApp"]) 
 
\t .controller("Forum", function($scope) { 
 
\t \t $scope.comments = [ 
 
\t \t \t { 
 
\t \t \t "name": "Kevin", 
 
\t \t \t "comment": "Wat een mooi toestel vandaag ontvangen, zeer blij met mijn bestelling :)", 
 
\t \t \t "country": "Nederland" 
 
\t \t \t }, 
 
\t \t ]; 
 

 
\t $scope.addComment = function() { 
 
\t \t $scope.comments.push({"name": $scope.name, "comment": $scope.comment, "country": $scope.country}); 
 

 
\t \t $scope.dataObject = { 
 
\t \t \t name: $scope.name, 
 
\t \t \t comment: $scope.comment, 
 
\t \t \t country: $scope.country 
 
\t \t }; 
 
\t \t 
 
\t \t $scope.name = ""; 
 
\t \t $scope.comment = ""; 
 
\t \t $scope.country = ""; 
 
\t }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<tr> 
 
<tr><input type="text" id="comment-name" class="comment-form" ng-model="dataObject.name"/></tr> 
 
<tr><input type="text" id="comment-country" class="comment-form" ng-model="dataObject.country"/></tr> 
 
<tr><textarea type="text" id="comment-box" class="comment-form" ng-model="dataObject.comment"/></textarea></tr> 
 
<tr><button ng-click="addComment()">Place comment</button></tr> 
 
</tr>

Answer 1

Нажмите DataObject для комментариев массива и создать новый DataObject с пустыми полями:

<table ng-app="forum-page" ng-controller="Forum"> 
 
<tr ng-repeat="comment in comments"> 
 
    <td>{{comment.name}}</td> 
 
    <td>{{comment.comment}}</td> 
 
    <td>{{comment.country}}</td> 
 
    <td></td> 
 
</tr> 
 

 
<tr> 
 
    <td><input type="text" id="comment-name" class="comment-form" ng-model="dataObject.name"/></td> 
 
    <td><input type="text" id="comment-country" class="comment-form" ng-model="dataObject.country"/></td> 
 
    <td><textarea type="text" id="comment-box" class="comment-form" ng-model="dataObject.comment"/></textarea></td> 
 
    <td><button ng-click="addComment()">Place comment</button></td> 
 
</tr> 
 
</table> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script> 
 
angular.module("forum-page", []) 
 
.controller("Forum", function($scope) { 
 
    $scope.comments = [ 
 
    { 
 
     "name": "Kevin", 
 
     "comment": "Wat een mooi toestel vandaag ontvangen, zeer blij met mijn bestelling :)", 
 
     "country": "Nederland" 
 
    }, 
 
    ]; 
 

 
    $scope.addComment = function() { 
 
    $scope.comments.push($scope.dataObject); 
 

 
    $scope.dataObject = { 
 
     name: '', 
 
     comment: '', 
 
     country: '' 
 
    }; 
 
    }; 
 
}); 
 
</script>