Question

我正在寻找两件事：

使用Angularjs
了解其运作方式。

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

实际上，我想使用“添加项目”按钮在制作对象下的项目数组中推送项。

这是我的控制器：

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>

实际上当我按下按钮时出现错误（未定义）。有什么问题？

Answer 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>

Answer 2

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

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

然后才能推进它。另请检查您的功能参数，如Marc在评论中所述。由于我们无法看到所有标记，因此不清楚传递给函数的内容，一个简单的console.log（）将向您显示该文件。

Answer 3

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

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

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

如何使用AngularJs在嵌套数组中推送项目

4 个答案: