, как создавать пустые строки таблицы, перед заполнением 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}}", тогда вы должны использовать нг-модель = "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>