如何将字段输入和textarea中输入的文本推送到json angular

时间:2016-11-15 17:07:46

标签: html angularjs json

当有人点击按钮时,如何使用Angular发表评论。每次如果我在字段输入和textarea中输入一些文本,文本就会消失。将显示一个没有任何名称,国家和评论的空白区块。输入的文本必须在现有的json之后推送。

angular.module("forum-page", ["myApp"])
	.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({"name": $scope.name, "comment": $scope.comment, "country": $scope.country});

		$scope.dataObject = {
			name: $scope.name, 
			comment: $scope.comment, 
			country: $scope.country
		}; 
		
		$scope.name = "";
		$scope.comment = "";
		$scope.country = "";
	};
});
<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>

1 个答案:

答案 0 :(得分:0)

将dataObject推送到comments数组并使用空字段创建新的dataObject:

&#13;
&#13;
<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>
&#13;
&#13;
&#13;