如何在填充ngrepeat之前生成空白表行

时间:2017-01-13 13:28:12

标签: javascript angularjs angularjs-ng-repeat

我是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>
            
&#13;
&#13;
&#13;

和棱角分明。我试图得到一个空白的可滚动表,然后我可以输入数据。如何使用ng-repeat进行此操作。我已经使用了几个小时。任何帮助将不胜感激。感谢。

3 个答案:

答案 0 :(得分:0)

我无法运行您的代码段并且您正在使用stockList&lt; - ! - &gt;钥匙串。

所以我看到的第一件事是你的输入使用value =“{{item.qty}}”而你应该使用ng-model =“item.qty”

请参阅https://docs.angularjs.org/api/ng/directive/input

答案 1 :(得分:0)

您应该使用空值初始化您的库存清单

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

答案 2 :(得分:0)

这里有效。你错过了角文件。这么多不需要的代码。

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>