添加将被推送到数组中的键的值角

Question

输入和textarea中的值应该被推送整个JavaScript部分工作，但是我怎样才能绑定ng模型，以便Angular将拾取输入的值信息并将其推入数组中。任何人都知道如何在HTML中做到这一点。

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 { 
 
\t \t \t "name": "Jason", 
 
\t \t \t "comment": "What a great phone I received from Meizu, will surely come back to buy again in the future", 
 
\t \t \t "country": "USA" 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t "name": "姚宣辰", 
 
\t \t \t "comment": "這個手機很標亮， 下次也會買魅族智能手機", 
 
\t \t \t "country": "中国" 
 
\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 var dataObj = { 
 
\t \t \t name: $scope.name, 
 
\t \t \t comment: $scope.comment, 
 
\t \t \t country: $scope.country 
 
\t \t }; 
 

 
\t \t $scope.dataObj = dataObj; 
 

 
\t \t res.error(function(data, status, header, config) { 
 
\t \t \t alert("failure message: " + JSON.stringify({data: data})); 
 
\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> 
 
<input type="text" class="comment-box-name" ng-model="{{dataObj.name}}"/> 
 
<input type="text" class="comment-box-comment" ng-model="{{dataObj.comment}}"/> 
 
<textarea type="text" class="comment-box-country" ng-model="{{dataObj.country}}"></textarea> 
 

 

 
<button ng-click="addComment()">Place comment</button>

Answer 1

不，你不能这样做，如果你想在模板中那种自动化。为了做这种动作，您需要将该操作放入您的点击事件侦听器中，该侦听器充当发送按钮。

$scope.addComment = function() { 
    // Add validations before proceeding 
    theArray.push(dataObj); 
} 

希望帮助

Answer 2

在你的代码做一些改动：

从ng-model值删除{{}}。

使用dataObj.name,dataObj.comment,dataObj.country代替{{dataObj.name}},{{dataObj.comment}},{{dataObj.country}}

2.使用$scope对象，而不是var初始化对象来执行双向数据绑定。

$scope.dataObj = { 
    name: $scope.name, 
    comment: $scope.comment, 
    country: $scope.country 
}; 

Demo!