wie leere Tabellenzeilen zu erzeugen, bevor mit ngrepeat

Question

Füllung bin ich relativ neu in 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> 
 
     

und eckig. Ich versuche eine leere scroll-fähige Tabelle zu bekommen, in die ich Daten eingeben kann. Wie kann ich das mit ng-repeat machen. Ich habe das mehrere Stunden lang gemacht. Jede Hilfe wird geschätzt. Vielen Dank.

Answer 1

Ich kann Ihr Code-Snippet nicht ausführen und Sie verwenden stockList < -! -> keychain.

Das erste, was ich sehe, ist, dass Ihr Eingabewert verwendet = "{{item.qty}}", während Sie sollten ng-Modell verwenden = "item.qty"

siehe https://docs.angularjs.org/api/ng/directive/input

Answer 2

Sie sollte Ihre Vorratsliste mit leeren Werten initialisieren

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

Answer 3

Hier funktioniert es. Sie haben die angulare Datei verpasst. Und so viele unerwünschte Codes.

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>