Question

我有一张显示字段的表格。这些在调用现有对象时显示正常。我想使用此表添加新对象。当对象为空时，它不会显示表。

这是表格代码。

<table class="table">
  <tr>
    <th>SKU</th>
    <th>Name</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr ng-repeat="sub in active.sub">
    <td>
      <input class="form-control" type="text" ng-model="sub.sku" name="sku" />
    </td>
    <td>
      <input class="form-control" type="text" ng-model="sub.name" name="name" />
    </td>
    <td>
      <input money type="text" class="form-control" ng-model="sub.sale" name="sale" min="1" max="1000000" />
    </td>
    <td>
      <input type="number" class="form-control" ng-model="sub.stock" name="stock" />
    </td>
  </tr>
</table>

当对象为null时，有没有办法让它显示表？这就是它的样子。

Answer 1

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<table class="table">
                    <tr>
                        <th>SKU</th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Stock</th>
                    </tr>

                    <tr ng-repeat="sub in active.sub" ng-init="active.sub=[{
 'sku':' ',
 'name':' ',
  'sale':' ',
  'stock':' '
}]">
                        <td><input class="form-control" type="text" ng-model="sub.sku" name="sku" /></td>
                        <td><input class="form-control" type="text" ng-model="sub.name" name="name" /></td>
                        <td><input money type="text" class="form-control" ng-model="sub.sale" name="sale" min="1" max="1000000"/></td>
                        <td><input type="number" class="form-control" ng-model="sub.stock" name="stock" /></td>
                    </tr>

                </table>

＆＃13;

在tr标签内设置ng-init="active.sub=[{sku:"",name"",sale:"",stock:" " }]。

或者将一个默认数组设置为$ scope.active.sub = [{sku：＆＃34; ＆＃34;，名称＆＃34; ＆＃34;，销售：＆＃34; ＆＃34;，股票：＆＃34; ＆＃34;并且从服务获取数据时，将数据推送到此数组中。

我可能在语法上不对，但是想法是在开头的json中为每个变量设置一个空值。

编辑：检查这个小提琴 https://jsfiddle.net/4hta18jy/1/

Answer 2

ng-repeat create rows based on the length of the array on which you have put ng-repeat. And if the value of object is null means length is 0 than it will not create any row. so if u want a row in case of null you can initialize the array with a object so it can create a row.

<table class="table">
                    <tr>
                        <th>SKU</th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Stock</th>
                    </tr>

                    <tr ng-repeat="sub in active.sub"  ng-init="active.sub == null ? active.sub=[{
 'sku':' ',
 'name':' ',
  'sale':' ',
  'stock':' '
}] : ''">
                        <td><input class="form-control" type="text" ng-model="sub.sku" name="sku" /></td>
                        <td><input class="form-control" type="text" ng-model="sub.name" name="name" /></td>
                        <td><input money type="text" class="form-control" ng-model="sub.sale" name="sale" min="1" max="1000000"/></td>
                        <td><input type="number" class="form-control" ng-model="sub.stock" name="stock" /></td>
                    </tr>

                </table>

如果对象为null，它将为数组active.sub分配一个对象。

表显示了我何时编辑对象，但不是在我想要创建新对象时

2 个答案: