Угловая приложение выбрасывает ошибку

Question

Мой код как этот

<div ng-app='myApp' ng-controller="MainCtrl"> 
<div ng-repeat="prdElement in pacakageElement track by $index" class="package-grid"> 
    <div style="border: 1px solid; padding-bottom: 10px; padding-top: 10px"> 
     <input placeholder="Product Code" /> 
     <input placeholder="Dimension" /> 
    </div> 
    <table class="hovertable"> 
     <thead> 
      <tr> 
       <th>Line #</th> 
       <th>ITCLS</th> 
       <th>Item #</th> 
       <th>Line Quantity#</th> 
       <th>Ship Quantity</th> 
       <th>PickQuantity</th> 
       <th>Quantity in Plt</th> 
       <th>Allready Packed</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="data in prdElement.Data" ng-init="data.newquantity = data.quantity"> 
       <td>{{data.itemId}}</td> 
       <td>{{data.itcls}}</td> 
       <td>{{data.itemId}}</td> 
       <td>Line Quantity#</td> 
       <td>Ship Quantity</td> 
       <td>PickQuantity</td> 
       <td> 
        <input type="text" ng-model="data.newquantity" placeholder="Quantity" required=required /> 
       </td> 
       <td>Allready Packed</td> 
      </tr> 
      <tr> 
       <td width="100%" colspan="4"> 
        <button ng-show="prdElement.show" ng-click="newPackageItem(prdElement,$event)">Next Pallet</button> 
       </td> 
       <td width="100%" colspan="4"> 
        <button ng-show="prdElement.show">Remove Pallet</button> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

    (function() { 
    angular.module('myApp', []).controller('MainCtrl', function ($scope) { 
     var counter = 0; 
     $scope.pacakageElement = [{ 
      name: counter, 
      show: true, 

      Data: [{ 
       name: 'item 1', 
       itemId: '284307', 

       itemCode: '', 
       description: 'Bicycle parts - frame', 
       quantity: '100', 
       handlingUnit: 'CTN', 
       weight: '613.04', 
       class: '', 
       lenght: '102', 
       width: '42', 
       height: '61', 
       flag: 'P' 


      }, { 
       name: 'item 2', 
       itemId: '284308', 

       itemCode: '', 
       description: 'Bicycle parts - fork', 
       quantity: '200', 
       handlingUnit: 'CTN', 
       weight: '242.99', 
       class: '', 
       lenght: '75', 
       width: '34', 
       height: '18', 
       flag: 'P' 
      }] 
     }]; 


     $scope.newPackageItem = function (packageElement, $event) { 
      var npackageElement = {}; 
      angular.copy(packageElement, npackageElement); 
      counter++; 
      packageElement.show = false; 

      npackageElement.name = counter; 
      angular.forEach(npackageElement.Data, function (row) { 
       if (row.quantity != row.newquantity || row.quantity != 0) { 
        row.quantity = row.quantity - row.newquantity; 

       } 

      }); 

      $scope.packageElement.push(npackageElement); 
     }; 
    }); 

}()); 

Здесь я пытаюсь дублировать мой первый набор данных и сделать некоторые расчеты по нему. Все работает отлично, кроме функции newPackageItem. эта функция в одиночку бросает ошибку

TypeError: Cannot read property 'push' of undefined 
at Scope.$scope.newPackageItem 

Fiddle

Answer 1

опечатка свойство "packageElement" как "pacakageElement". Измените все экземпляры, чтобы использовать «packageElement», и он должен работать.