表顯示何時編輯對象，但不是當我想創建一個新對象時

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> 

有沒有什麼辦法讓它在對象爲空時顯示錶？這是它的樣子。

Answer 1

<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>

tr標籤裏面設置ng-init="active.sub=[{sku:"",name"",sale:"",stock:" " }]。

或者將一個默認數組設置爲$ scope.active.sub = [{sku：「」，name「」，sale：「」，stock：「」}]，並從服務獲取數據，進入這個數組。

我可能不會在語法上正確，但Idea在開始時對於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> 

將一個對象分配給數組active.sub如果它是空的。