ng-repeat与ng-init结合使用

Question

Controllers loads $scope.shops on init already. Async with defer and promise etc.. I create a panel for each shop there is available. Then I'd like to add columns for each item.

I have a method in controller getItemsPerShop(item) which is also async etc.. I currently get two panels (there are two shops), but the items are the same.. probably cause of the async issue and the $scope.items not getting downloaded fast enough, how would I go about solving this.

   <div ng-repeat="shop in shops">
        <div class="panel panel-default">
            <div class="panel-heading">shop {{shop}}</div>
            <table class="table">
                <thead ng-init="getItemsPershop(shop)">
                    <tr>
                        <th>Number</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody ng-repeat="item in items"> 
                    <tr>
                        <th scope="row">{{item.nr}}</th>
                        <td>{{item.desc}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

It's like a nested situation where the each panel need to load it's rows.

Answer 1

I will go for making getItemsPershop() in controller.

Did you forget the items = in ng-init ?

<div ng-repeat="shop in shops">
        <div class="panel panel-default">
            <div class="panel-heading">shop {{shop}}</div>
            <table class="table">
                <!-- forgot "items =" ? -->
                <thead ng-init="items = getItemsPershop(shop)">
                    <tr>
                        <th>Number</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody ng-repeat="item in items"> 
                    <tr>
                        <th scope="row">{{item.nr}}</th>
                        <td>{{item.desc}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
</div>

Answer 2

The way your template looks, you have one array items in your scope. However, you need to nest it in the shop, otherwise you can't distinguish them.

In the end it will look like this:

<tbody ng-repeat="item in shop.items"> 
    <tr>
        <th scope="row">{{item.nr}}</th>
        <td>{{item.desc}}</td>
    </tr>
</tbody>

As pointed out in another answer you can assign the items to a field items in a scope local to the current shop. However I would discourage you from doing so. From the docs :

There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.

In angular you are supposed to init a model in your controller and render it via a template. Mixing these two makes your code harder to understand, test, and maintain.