オブジェクトを編集するときにテーブルが表示されますが、新しいオブジェクトを作成するときは表示されません。

Question

フィールドを表示するテーブルがあります。これらは、既存のオブジェクトを呼び出すときに適切に表示されます。この表を使って新しいオブジェクトを追加したいと思います。オブジェクトがnullの場合、テーブルは表示されません。

次は表コードです。

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

設定ng-init="active.sub=[{sku:"",name"",sale:"",stock:" " }] TRタグ内。

$ scope.active.sub = [{sku： ""、 "name" "、sale：" "、stock："}]としてデフォルトの配列を1つ設定し、サービスからデータを取得するときは、この配列に挿入します。

私は構文的に正しいとは限りませんが、最初はjsonの各変数に空の値を持たせることです。

編集：それがnullの場合 チェックこのフィドル 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にオブジェクトを割り当てます。