javascript - Set selection options depending on another select element's value in AngularJS - Stack Overflow

admin管理员组

文章数量:1344205

I nearly struggled as much naming this question as I am with the actual problem! I have two selects:

Select 1:

<select ng-change="bankSelected()" ng-model="user.bankName">
    <option selected value="">Select</option>
    <option ng-repeat="bank in banks" value="{{bank.name}}">{{bank.name}}</option>
</select>

Select 2:

<select ng-model="user.branch">
    <option selected value="">Select</option>
    <option ng-repeat="// what to do??"></option>
</select>

The 'bankSelected()' function in my controller:

$scope.bankSelected = function () {
    console.log('Bank selected: ' + $scope.user.bankName);
}

I have a JSON file that I import all the bank objects from, here's an example:

{
    "banks" : [
        {
            "name" : "Bank A",
            "branches" : [
                {
                    "name" : "Branch 1",
                    "code" : "1"
                },
                {
                    "name" : "Branch 2",
                    "code" : "2"
                }
            ]
        },
        {
            "name" : "Bank B",
            "branches" : [
                {
                    "name" : "Branch 3",
                    "code" : "3"
                },
                {
                    "name" : "Branch 4",
                    "code" : "4"
                },
                {
                    "name" : "Branch 5",
                    "code" : "5"
                }
            ]
        }
    ]
}

The JSON that I'm actually using though is about 1000 lines long. So my problem, is that if the user selects 'Bank A' in the first select box, I want the second select box to display 'Branch 1' and 'Branch 2'. Likewise if the user selects 'Bank B', I want to display 'Branch 3', 'Branch 4', and 'Branch 5'. If the user has not selected anything in the first select (e.g. no Bank selected), then the second select (branches) shouldn't contain anything. I'm sure you understand what I'm getting at?

How can I make this happen in AngularJS?

I nearly struggled as much naming this question as I am with the actual problem! I have two selects:

Select 1:

<select ng-change="bankSelected()" ng-model="user.bankName">
    <option selected value="">Select</option>
    <option ng-repeat="bank in banks" value="{{bank.name}}">{{bank.name}}</option>
</select>

Select 2:

<select ng-model="user.branch">
    <option selected value="">Select</option>
    <option ng-repeat="// what to do??"></option>
</select>

The 'bankSelected()' function in my controller:

$scope.bankSelected = function () {
    console.log('Bank selected: ' + $scope.user.bankName);
}

I have a JSON file that I import all the bank objects from, here's an example:

{
    "banks" : [
        {
            "name" : "Bank A",
            "branches" : [
                {
                    "name" : "Branch 1",
                    "code" : "1"
                },
                {
                    "name" : "Branch 2",
                    "code" : "2"
                }
            ]
        },
        {
            "name" : "Bank B",
            "branches" : [
                {
                    "name" : "Branch 3",
                    "code" : "3"
                },
                {
                    "name" : "Branch 4",
                    "code" : "4"
                },
                {
                    "name" : "Branch 5",
                    "code" : "5"
                }
            ]
        }
    ]
}

The JSON that I'm actually using though is about 1000 lines long. So my problem, is that if the user selects 'Bank A' in the first select box, I want the second select box to display 'Branch 1' and 'Branch 2'. Likewise if the user selects 'Bank B', I want to display 'Branch 3', 'Branch 4', and 'Branch 5'. If the user has not selected anything in the first select (e.g. no Bank selected), then the second select (branches) shouldn't contain anything. I'm sure you understand what I'm getting at?

How can I make this happen in AngularJS?

• javascript
• html
• json
• angularjs

Share Improve this question Follow asked Sep 28, 2015 at 11:42 user818700user818700 4

• can you create a plunk ? – Rabi Commented Sep 28, 2015 at 11:49
• Why not ng-repeat="branch in branches? No one prevents you from updating branches in bankSelected(). – a better oliver Commented Sep 28, 2015 at 12:06
• @zeroflagL does that mean that in bankSelected() I have to have a long switch statement updating the branches list depending on what bank was selected? – user818700 Commented Sep 28, 2015 at 12:09
• Rather something like getBranches from K.Torress's answer. But updating branches doesn't have an impact on performance, contrary to calling getBranches on each digest cycle. – a better oliver Commented Sep 28, 2015 at 12:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

bank ng-repeat

<select ng-model="user.bankName">
    <option selected value="">Select</option>
    <option ng-repeat="bank in banks" value="{{bank.name}}">{{bank.name}}</option>
</select>

branch ng-repeat

<select ng-model="user.branch" ng-show="user.bankName">
    <option selected value="">Select</option>
    <option ng-repeat="branch in getBranches(user.bankName)" value="{{branch.code}}">{{ branch.name }}</option>
</select>

source of the branch repeat is assign to getBranches() function in the scope and here we pass the bank name which selected before.

in that function

$scope.getBranches = function(selectedBank) {

    // get the selected bank object from the banks array
    var filteredBank = $filter('filter')($scope.banks, selectedBank);

    // return the branches of the selected bank
    return filteredBank[0].branches;
};

don't forget to inject the $filter service as below

app.controller('CtrlName', function($scope, $filter) {...

here is the DEMO

---

If you can change your select to something like below it will be more cleaner :)

this will select the whole object of the selected option.

<select ng-model="user.bankName" ng-options="bank.name for bank in banks">
</select>

here we can use selected bank object to get the branches as user.bankName.branches.

<select ng-model="user.branch" ng-if="user.bankName" ng-options="branch.code as branch.name for branch in user.bankName.branches">
</select>

so we can get rid of the getBranches().

here is the DEMO

本文标签： javascriptSet selection options depending on another select element39s value in AngularJSStack Overflow