使用AngularJS级联下拉菜单

Question

A merchant has multiple branches. When selecting a merchant I'm trying to make another dropdown list the data from merchant.branches .

Doing the below does not seem to be resolving the problem:

                <label>Merchant:</label>
                <select ng-if="merchants" ng-model="merchant" ng-options="merchant.name for merchant in merchants track by merchant.id"></select>
                <span ng-if="!merchants">Listing merchants, please wait...</span>

                <br />

                <label>Branch:</label>
                <select ng-if="merchant.branches" ng-model="device.branch" ng-options="branch.name for branch in merchant.branches track by branch.id"></select>
                <span ng-if="!merchant.branches">Listing branches, please wait...</span>

                <pre>
                    {{ merchant.branches }}
                </pre>

Please note that the data is correct and Merchants return properly with their respective branches.

SOLVED

Using a different method (By calling ng-change on the first dropdown and then populating the second dropdown). However, is it possible to achieve this without writing any controller code?

Answer 1

I have to guess at how your controller works, but you might have luck with this:

<label>Branch:</label>
<select ng-if="merchant.branches" 
    ng-model="device.branch" 
    ng-options="branch.name for branch in merchants[merchant.id].branches track by branch.id"></select>