为什么这个拼接在我的ng-repeat中删除了错误的项目?

时间:2015-06-01 19:35:41

标签: angularjs angularjs-ng-repeat indexof array-splice

我正在尝试根据$ index对这个ng-repeat中的项目进行拼接。它可以很好地添加它们,但是当我尝试使用相同的代码删除该项时,它只删除数组的最后一项,就好像它正在执行pop()方法一样。我不知道为什么。这是我的目标,我正在重复:

"lineItems": [
  {
    "area": "Bedroom",
    "label": "Sleep Time",
    "notes": "",
    "pictures": [],
    "subLineItems": [
      {
        "label": "Flooring",
        "data": {
          "rates": [
            {
              "label": "Damaged",
              "value": "1",
              "color": "damaged-red"
            },
            {
              "label": "Poor",
              "value": "2",
              "color": "poor-orange"
            },
            {
              "label": "Dirty",
              "value": "3",
              "color": "dirty-yellow"
            },
            {
              "label": "Fair",
              "value": "4",
              "color": "fair-light-blue"
            },
            {
              "label": "Good",
              "value": "5",
              "color": "good-green"
            }
          ]
        },
        "items": [
          [
            {
              "uuid": "6f5fed0c-db03-41a0-a575-15af3ad3",
              "label": "Hot Water Tank",
              "selected": false,
              "price": 500,
              "labor": [
                {
                  "uuid": "8b9f9ea2-b163-45c0-9a80-087a8e16",
                  "label": "Install Carpet Basic",
                  "selected": false,
                  "price": "1.00"
                },
                {
                  "uuid": "a696faca-197a-4fd9-972c-05f197f4",
                  "label": "Install Trim Basic",
                  "selected": false,
                  "price": "0.50"
                },
                {
                  "uuid": null,
                  "label": "Select",
                  "selected": true
                }
              ]
            },
            {
              "uuid": "7815a160-7b70-48d1-ba32-8c232654",
              "label": "Ceiling Fan Replacement",
              "selected": false,
              "price": 175,
              "labor": [
                {
                  "uuid": "8b9f9ea2-b163-45c0-9a80-087a8e16",
                  "label": "Install Carpet Basic",
                  "selected": false,
                  "price": "1.00"
                },
                {
                  "uuid": "a696faca-197a-4fd9-972c-05f197f4",
                  "label": "Install Trim Basic",
                  "selected": false,
                  "price": "0.50"
                },
                {
                  "uuid": null,
                  "label": "Select",
                  "selected": true
                }
              ]
            },
            {
              "uuid": null,
              "label": "Select",
              "selected": true
            }
          ]
        ],
        "rate": null,
        "notes": null,
        "pictures": []
      }

这是我的HTML:

                            <ul class="list-inline col-xs-12">
                                   <form class="form-inline col-xs-12" id="expenseForm">
                                   <!-- li = items[0].array -->
                                      <li ng-repeat="item in subLineItem.items track by $index" class="bouncy-slide-left" ng-class-even="'even-stripe'">
                                         <!-- MATERIALS -->
                                         <div class="form-group col-xs-3" style="margin-left: 0px !important">
                                            <label for="material">{{labels.material.label}}</label>
                                            <br>
                                            <select name="material" class="form-control" ng-model="expense.mat.item" style="width: 125px">
                                               <option value="{{mat.uuid}}" ng-repeat="mat in item" ng-selected="mat.selected">{{mat.label}}</option>
                                            </select>
                                         </div>
                                         <div class="form-group col-xs-2">
                                            <label>{{labels.material_qty.label}}</label>
                                            <br>
                                            <input type="text"  ng-model="item.mat.qty" class="form-control" name="quantity" placeholder="{{labels.material_qty.placeholder}}" style="width: 55px; overflow: scroll">
                                         </div>
                                            <div class="form-group col-xs-2">
                                            <label>{{labels.material_cost.label}}</label>
                                            <br>
                                            <input type="text" ng-model="expense.mat.price" class="form-control" name="labor"  placeholder="{{labels.labor_cost.placeholder}}" style="width: 55px; overflow: scroll">
                                         </div>
                                         <div class="form-group col-xs-2">
                                            <label>{{labels.totals.total}}</label>
                                            <br>
                                            <input type="text" ng-model="expense.mat.total" class="form-control" name="labor" placeholder="{{labels.labor_cost.placeholder}}" style="width: 55px; overflow: scroll">
                                         </div>
                                         <div class="icon-str col-xs-1" style="padding-left: 0px" ng-click="removeItem($parent.$parent.$index, $parent.$index, $index)">
                                                <label for=""></label>
                                                <br>
                                                <i class="fa-trash delete-inspec"></i>
                                            </div> 
                                        <!-- LABOR  ITEMS -->
                                         <div class="form-group col-xs-3">
                                            <label for="labor">{{labels.labor.label}}</label>
                                            <br>
                                            <select name="labor" class="form-control" ng-model="item.lab.item" style="width: 125px">
                                               <option value="{{lab.uuid}}" ng-repeat="lab in item[0].labor" ng-selected="lab.selected">{{lab.label}}</option>
                                            </select>
                                         </div>
                                         <div class="form-group col-xs-2">
                                            <label>{{labels.material_qty.label}}</label>
                                            <br>
                                            <input type="text" ng-model="item.lab.qty" class="form-control" name="hours" placeholder="{{labels.labor_qty.placeholder}}" style="width: 55px;overflow: scroll">
                                         </div>
                                         <div class="form-group col-xs-2">
                                            <label>{{labels.labor_cost.label}}</label>
                                            <br>
                                            <input type="text" ng-model="item.lab.price" class="form-control" name="labor" placeholder="{{labels.labor_cost.placeholder}}" style="width: 55px;overflow: scroll">
                                         </div>
                                         <div class="form-group col-xs-2 ">
                                            <label>{{labels.totals.total}}</label>
                                            <br>
                                            <input type="text" ng-model="item.lab.total" class="form-control" name="labor" placeholder="{{labels.labor_cost.placeholder}}" style="width: 55px;overflow: scroll">
                                         </div>
                                         <!-- RESPONSIBLE PARTY -->
                                         <div class="form-group row col-xs-12" style="margin-left:0px !important; padding-left: 0px; padding-bottom: 10px; border-bottom: 2px solid #888">
                                           <div class="col-xs-5 text-left" style="padding-right: 0px">
                                                <label for="expenses">{{labels.responsible.label}}</label>
                                                <br>
                                                <select name="expenses" ng-model="expense.responsible" class="form-control" style="width: 200px">
                                                   <option value="{{resp.value}}" ng-repeat="resp in labels.responsibleParty" ng-selected="resp.selected">{{resp.label}}</option>
                                                </select>
                                            </div>
                                         </div>
                                      </li>
                                   </form>
                                </ul>

这是我的控制器:

   //add line item when NEW button is pressed
   $scope.add = function(a, b){
       //create the source of the copy, and where you want to send it (destination is a blank array)
       var mySource = $scope.lineItems[0].subLineItems[0].items[0];
       var myDestination = [];
       //copy the source and send it to destination
       angular.extend( myDestination, mySource);
       //push that newly built array into the array
       $scope.lineItems[a].subLineItems[b].items.push(myDestination);
       //show the updated version of that array
       console.log( $scope.lineItems[a].subLineItems[b].items);
   };
   //remove item from array
   $scope.removeItem = function(a, b, c){
       console.log(a, b, c);
       $scope.lineItems[a].subLineItems[b].items.splice(c, 1);
       console.warn($scope.lineItems[a].subLineItems[b].items);
   };

这会在控制台中输出正确的数字,但实际上会删除items数组中的最后一项。任何想法?

1 个答案:

答案 0 :(得分:0)

问题在于您的父标记。

removeItem($parent.$parent.$index, $parent.$index, $index)

这里,$parent是根据你的html中的分区而不是根据数组。 尝试一些其他逻辑来定位子阵列。