在用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 <-！->鑰匙串。

因此，我首先看到的是您的輸入使用value =“ {{item.qty}}”，而您應該使用ng-model =“ 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>