Wie eingegebene Text in Feldeingabe und Textfeld zu JSON angular

Question

Wie gebe ich Kommentare mit Angular, wenn jemand auf die Schaltfläche klickt. Jedes Mal, wenn ich etwas Text in das Feld input und textarea eingeben, wird der Text weg sein. Es wird ein leerer Block ohne Namen, Land und Kommentare angezeigt. Der eingegebene Text muss nach dem vorhandenen json gedrückt werden.

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

Push-dataObject- auf Array Kommentare und neue dataObject- mit leeren Feldern erstellen:

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