2015-11-20 62 views
0

這裏是我的angularjs代碼來獲取表中的值並保存。如果我把表中的一些數據並保存,其工作正常,但如果我點擊保存而不在表中輸入任何數據就說明誤差定義並從angularJS表中獲取值

類型錯誤:$ scope.item未定義

這裏是我的代碼,並請幫我。我在angularJS一個新手

<div ng-app="Myapp"> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script> 
     <script> 
      var Myapp = angular.module('Myapp', ["ngRoute"]); 
     </script> 

     <div ng-controller="orderFormController"> 
      <table id="item_table"> 
       <thead> 
        <tr class="headings"> 
         <th class="column-title">Item </th>    
         <th class="column-title">Rate</th>       

         </th> 

        </tr> 
       </thead> 

       <tbody> 
        <tr> 
         <td>   
          <input type="text" name="item" ng-model='item[0]'> 
         </td> 

         <td> 
         <input type="text" name="rate" ng-model='rate[0]'> 
         </td> 

        </tr> 
        <tr> 
         <td>   
          <input type="text" name="item" ng-model='item[1]'> 
         </td> 

         <td> 
         <input type="text" name="rate" ng-model='rate[1]'> 
         </td> 

        </tr> 


       </tbody> 

      </table> 
      <button type="button" ng-click='saveorder()' >SAVE ORDER</button> 
     </div>  
     <script> 
      Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) { 
       var data = {}; 
       data['item'] = []; 
       $scope.saveorder = function() { 
        var rowCount = 3; 
        for (i = 1; i < rowCount; i++) { 
         data['item'][i] = {'item': $scope.item[i], 'rate': $scope.rate[i]} 

        } 
        alert(data); 
       } 

      }]); 
     </script>  
+1

嘗試'VAR rowCount時= 2'或多個動態,' var rowCount = $ scope.item.length' – Phil

回答

0

$scope.item沒有定義,除了在for循環,如果有表中沒有值,則$scope.item將保持不確定的任何地方。您可以簡單地在for循環之前聲明它,並設置一些init值,這些值可以在控制器中完成,或者使用ng-init指令。

另外,我建議對錶格行使用ng-repeat指令,它會爲集合中的每個項目創建一個模板,這使您的代碼更易於管理。這裏的文檔:ngRepeat

+1

謝謝@zachperkitny,現在它的工作正常。在這裏,我只硬編碼行,因爲我無法獲得動態創建的行的值。我通過追加$('#item_table tbody')創建新行。append(response); – nervartha

0

修改您的HTML只包括這難道不是2行輸入

<td>   
    <input type="text" name="item" ng-model='item'> 
</td> 
<td> 

    <input type="text" name="rate" ng-model='rate'> 
</td> 

和修改saveOrder

$scope.saveorder = function() { 
     if (!($scope.item.length && $scope.rate.length)){ 
       alert('can\'t be empty'); 
       return; 
     } 
     data['item'].push({'item': $scope.item, 'rate': $scope.rate}); 
     $scope.item = ""; 
     $scope.rate = ""; 
     console.log(data['item'][data['item'].length - 1]); 
     alert(data); 
}