如何使用AngularJs将项目推入嵌套数组中
[英]How to push items in a nested array with AngularJs
问题描述
I'm looking for two things: 
我在寻找两件事：
- To push items in a nested array with Angularjs 使用Angularjs将消息推送到嵌套数组中
- To understand how it works exactly. 了解其工作原理。
I've been looking for answers on differents previous topic but I didn't manage to come to a solution. 我一直在寻找与上一个主题不同的答案，但没有设法解决。
Actually, I want to use an Add Item button to push an item in a items array under a facture object . 实际上，我想使用“添加项目”按钮将一个项目推入到一个制造对象下的项目数组中 。
Here is my controller: 这是我的控制器：
PlasmaCrm.controller('FacturesSoloController', function($scope, $stateParams, Facture ) {
Facture.get({ id: $stateParams.factureId }, function(data) {
$scope.facture = data;
});
$scope.ajouterItem = function(index, item){
$scope.facture.items[index].item.push({
description: 'Test'
});
}
});
And here is my data structure (as returned by my API) 这是我的数据结构（由我的API返回）
{
"id":10200,
"client_id":1,
"lead_id":1,
"courtedescription":"Description test",
"etat":"En attente",
"created_at":"2015-02-21 15:07:17",
"updated_at":"2015-02-21 15:07:17",
"items":[
{
"id":1,
"facture_id":10200,
"description":"Item num\u00e9ro 1",
"prix":"15.00",
"tps":"0.75",
"tvq":"1.50",
"grandtotal":"17.25",
"created_at":"2015-02-21 15:07:18",
"updated_at":"2015-02-21 15:07:18"
},
{
"id":2,
"facture_id":10200,
"description":"Deuxi\u00e8me item quoi",
"prix":"135.00",
"tps":"6.75",
"tvq":"13.47",
"grandtotal":"155.22",
"created_at":"2015-02-21 15:07:18",
"updated_at":"2015-02-21 15:07:18"
}
]
}
Of course my HTML contains a button: 当然，我的HTML包含一个按钮：
<form ng-submit="ajouterItem(item)">
<button class="btn btn-primary">Ajouter un item</button>
</form>
Actually I got an error (undefined) when I press to button. 实际上，当我按下按钮时出现错误（未定义）。 What is wrong? 怎么了？
4 个解决方案
解决方案1
1 2019-03-01 09:15:55
For those who are still looking for pushing data in the nested array can refer below example of Comments and Replies : 对于仍在查找嵌套数组中的数据的用户，可以参考下面的Comments and Replies示例：
<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <!--Comment section--> <ul ng-repeat="comment in comments track by $index" style="background: skyblue; padding: 10px;"> <li> <b>Comment {{$index}} : </b> <br> {{comment.comment}} <!--Reply section--> <ul ng-repeat="reply in comment.reply track by $index"> <li><i>Reply {{$index}} :</i><br> {{reply.comment}}</li> </ul> <!--End reply section--> <input type="text" ng-model="reply" placeholder=" Write your reply." /><a href="" ng-click="insertReply($index,reply)">Reply</a> </li> </ul> <!--End comment section --> <!--Post your comment--> <b>New comment</b> <input type="text" placeholder="Your comment" ng-model="comment" /> <a href="" ng-click="newComment(comment)">Post </a> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { //Comments object having reply oject $scope.comments = [{ comment: 'hi', reply: [{ comment: 'hi inside commnet' }, { comment: 'hi inside commnet' }] }]; //push reply $scope.insertReply = function (index, reply) { $scope.comments[index].reply.push({ comment: reply }); } //push commnet $scope.newComment = function (comment) { $scope.comments.push({ comment: comment, reply: [] }); } }); </script> </body> </html>
解决方案2
0 2015-03-15 21:53:44
Since there is no item property inside the items array objects, you cant push to it. 由于items数组对象内部没有item属性，因此无法推送到该属性。 You have to add: 您必须添加：
$scope.facture.items[index].item = []
before you can push to it. 在您可以继续之前。 Also check your functions parameters as Marc states in his comment. 还要按照Marc在其评论中的说明检查功能参数。 Since we can't see all of the markup it is unclear what is passed to the function, a simple console.log() will show you that ofcourse. 由于我们看不到所有标记，因此不清楚传递给函数的内容是什么，一个简单的console.log（）会向您显示。
解决方案3
0 2015-03-15 23:20:25
I found the answer, it was finaly simpler than I first thought: 我找到了答案，这比我最初想象的要简单得多：
$scope.ajouterItem = function(){
$scope.facture.items.push({
description: 'Test'
});
}
解决方案4
0 2019-03-01 08:37:29
First, create a variable to fill, delete, and add items. 首先，创建一个变量以填充，删除和添加项目。 Next, assign this variable to the array inside the model. 接下来，将此变量分配给模型内部的数组。
PlasmaCrm.controller('FacturesSoloController', function($scope, $stateParams, Facture )
{
$scope.items= [];
Facture.get({ id: $stateParams.factureId }, function(data) {
$scope.facture = data;
$scope.items = $scope.facture.items;
});
$scope.ajouterItem = function(item){
$scope.items.push(item);
$scope.facture.Items = $scope.items;
}
});
In this way, you can also edit the previous information and add new information. 这样，您还可以编辑先前的信息并添加新的信息。 Since we first set "items". 自从我们第一次设置“项目”。 To remove the same as usual : 与平常一样删除：
$scope.RemoveItem = function (index) {
$scope.facture.Items.splice(index, 1);
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.