Javascript 根据AngularJS中另一个选择元素的值设置选择选项

我几乎挣扎着说出这个问题的名字，就像我面对实际问题一样！我有两个选择：

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

我有一个JSON文件，从中导入所有银行对象，下面是一个示例：

{
    "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"
                }
            ]
        }
    ]
}

我实际使用的JSON大约有1000行长。因此，我的问题是，如果用户在第一个选择框中选择“银行A”，我希望第二个选择框显示“分行1”和“分行2”。同样，如果用户选择“银行B”，我想显示“分行3”、“分行4”和“分行5”。如果用户在第一次选择中未选择任何内容，例如未选择任何银行，则第二次选择的分行不应包含任何内容。我相信你明白我的意思吧

如何在AngularJS实现这一点？

银行ng重复

分支重复的来源被分配给作用域中的getBranchs函数，这里我们传递之前选择的银行名称

在该功能中

$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;
};

不要忘记注入$filter服务，如下所示

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

这是你的电话号码

如果您可以将“选择”更改为以下内容，则会更干净：

这将选择所选选项的整个对象

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

这样我们就可以摆脱这些分支

---

这是你能创建一个plunk吗？为什么不在Branchs中创建ng repeat=branch？没有人阻止您更新bankSelected中的分支。@zeroflagL这是否意味着在bankSelected中，根据选择的银行，我必须有一个长的switch语句来更新分支列表？这与K.Torress的答案中的GetBranchs类似。但与在每个摘要周期调用getBranchs相反，更新分支不会对性能产生影响。

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

$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;
};

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

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

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