如何與ngrepeat

Question

填充之前產生的空白錶行我是比較新的JavaScript的

angular 
 
    .module('MainView', ['Utils','ngMaterial']) 
 
    .controller('MainCtrl', ['$scope','$timeout','$q','$log' ,function($scope,$timeout,$q,$log) { 
 
     var self = this; 
 
     self.keychain = null; 
 

 
self.keychain = [{description:'some description',couponCode:37678 },{description:'some text',couponCode:23478,unitPrice:300.99,totalCost:300.99,actions: 'move' }] 
 

 
    }]);

<div ng-app="MainView" ng-controller="MainCtrl">     
 
<table> 
 
        <thead> 
 
         <tr> 
 
          <th>Description</th> 
 
          <th>Coupon Code</th> 
 
    
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr ng-repeat="item in vm.stockList track by $index" class="item--{{$index}}"> 
 
          <td>{{$index + 1}} 
 
          </td> 
 
          <td class="mdl-textfield__input"> 
 
           <input value="{{item.qty}}" size="3" maxlength="3" class="" type="number" required /> 
 
          </td> 
 
          <td>{{item.couponCode || 'n/a'}}</td> 
 
          <td>{{item.description || 'n/a'}}</td> 
 
          <td>   <button class="mdl-button mdl-js-button "> 
 
          <i class="material-icons">delete</i> 
 
          </button></td> 
 

 

 
         </tr> 
 
        </tbody> 
 
       </table> 
 
    </div> 
 
     

和角度。我正試圖獲得一張空白的可滾動表格，然後我可以將數據輸入到該數據表格中。如何使用ng-repeat來執行此操作。我已在此上了幾個小時。任何幫助將不勝感激。謝謝。

Answer 1

我無法運行您的代碼片段，並且您正在使用stockList < - ！ - > keychain。

所以我看到的第一件事情是，你的輸入使用值= 「{{item.qty}}」，而應該使用NG-模型= 「item.qty」

看到https://docs.angularjs.org/api/ng/directive/input

Answer 2

你應使用空值初始化您的庫存清單

vm.stockList = [ 
    {qty: null, couponCode: null, description: null}, 
    {qty: null, couponCode: null, description: null}, 
] 

Answer 3

這裏工作。你錯過了角度文件。這麼多不需要的代碼。

angular.module('MainView', []) 
 
    .controller('MainCtrl', ['$scope' ,function($scope) { 
 
     var self = this; 
 
     self.keychain = null; 
 
    self.keychain = [{description:'some description', couponCode:37678 }, 
 
        {description:'some text',couponCode:23478,unitPrice:300.99,totalCost:300.99,actions: 'move' }]; 
 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<div ng-app="MainView">     
 
<table ng-controller="MainCtrl as vm"> 
 
        <thead> 
 
         <tr> 
 
          <th>Description</th> 
 
          <th>Coupon Code</th> 
 
    
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr ng-repeat="item in vm.keychain" class="item"> 
 
          <td>{{$index + 1}} 
 
          </td> 
 
          <td class="mdl-textfield__input"> 
 
           <input size="3" maxlength="3" class="" type="number" required /> 
 
          </td> 
 
          <td>{{item.couponCode}}</td> 
 
          <td>{{item.description}}</td> 
 
          <td>   <button class="mdl-button mdl-js-button "> 
 
          <i class="material-icons">delete</i> 
 
          </button></td> 
 

 

 
         </tr> 
 
        </tbody> 
 
       </table> 
 
    </div>