如何使用 AngularJs 将项目推送到嵌套数组中答案

【问题标题】：How to push items in a nested array with AngularJs如何使用 AngularJs 将项目推送到嵌套数组中
【发布时间】：2019-03-01 17:15:55
【问题描述】：

我正在寻找两件事：

使用 Angularjs 将项目推送到嵌套数组中
了解它的具体工作原理。

我一直在寻找关于不同previous 主题的答案，但我没有找到解决方案。

实际上，我想使用添加项目按钮将 item 推送到 facture 对象 下的 items 数组 中。

这是我的控制器：

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'
    });
   }

});

这是我的数据结构（由我的 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"
        }
     ]
  }

当然，我的 HTML 包含一个按钮：

<form ng-submit="ajouterItem(item)">
   <button class="btn btn-primary">Ajouter un item</button>
</form>

实际上，当我按下按钮时出现错误（未定义）。怎么了？

【问题讨论】：

有趣的是，您的 ng-submit 传入了一个参数，但您的函数需要（并尝试使用）index 和 item。也许item 是未定义的？
我无法读取未定义的属性“项目”

标签： javascript arrays angularjs angularjs-resource

【解决方案1】：

那些仍在寻找在嵌套数组中推送数据的人可以参考下面的评论和回复示例：

<!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】：

由于 items 数组对象中没有 item 属性，因此您无法推送到它。您必须添加：

$scope.facture.items[index].item = []

在你可以推动它之前。还要检查你的函数参数，正如 Marc 在他的评论中所说的那样。因为我们看不到所有的标记，所以不清楚传递给函数的内容，一个简单的 console.log() 会显示给你。

【讨论】：

【解决方案3】：

我找到了答案，它比我最初想象的要简单：

$scope.ajouterItem = function(){
    $scope.facture.items.push({
      description: 'Test'
    });
}

【讨论】：

【解决方案4】：

首先，创建一个变量来填充、删除和添加项目。接下来，将此变量分配给模型内部的数组。

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

});

通过这种方式，您还可以编辑以前的信息并添加新信息。由于我们首先设置了“项目”。像往常一样删除：

$scope.RemoveItem = function (index) {
    $scope.facture.Items.splice(index, 1);
};

【讨论】：