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

时间:2016-11-14 23:23:13

标签: html angularjs

输入和textarea中的值应该被推送整个JavaScript部分工作,但是如何绑定ng-model以便Angular将获取输入信息的值并将其推送到数组中。任何人都知道如何在HTML中做到这一点。

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

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

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

		$scope.dataObj = dataObj;

		res.error(function(data, status, header, config) {
			alert("failure message: " + JSON.stringify({data: data}));
		});

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

2 个答案:

答案 0 :(得分:0)

如果你想在模板中实现这种自动化,那么你不能这样做。为了执行此类操作,您需要将该操作放在单击事件侦听器中,该侦听器充当发送按钮。

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

希望有所帮助

答案 1 :(得分:0)

代码中需要进行一些更改:

1。{{}}值中删除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!