Soy relativamente nueva en 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>
            

Y angular Estoy tratando de obtener una tabla desplazable en blanco en la que luego puedo ingresar datos. ¿Cómo puedo hacer esto usando ng-repeat? He estado en esto durante varias horas. Cualquier ayuda será apreciada. Gracias.

0
samuel 13 ene. 2017 a las 16:28

3 respuestas

La mejor respuesta

Debe inicializar su lista de valores con valores vacíos

vm.stockList = [
    {qty: null, couponCode: null, description: null},
    {qty: null, couponCode: null, description: null},
]
0
Bo Vandersteene 13 ene. 2017 a las 13:48

Aquí está funcionando. Te perdiste el archivo angular. Y tantos códigos no deseados.

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>
0
Manikandan Velayutham 13 ene. 2017 a las 14:00

No puedo ejecutar su fragmento de código y está utilizando el llavero stockList <-! ->.

Entonces, lo primero que veo es que su entrada usa value = "{{item.qty}}" mientras que debería usar ng-model = "item.qty"

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

0
Harper04 13 ene. 2017 a las 13:33