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

【问题标题】：Set selection options depending on another select element's value in AngularJS根据AngularJS中另一个选择元素的值设置选择选项
【发布时间】：2015-12-25 15:30:09
【问题描述】：

我几乎和实际问题一样难以命名这个问题！我有两个选择：

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

选择 2：

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

我的控制器中的“bankSelected()”函数：

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

我有一个 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 行长。所以我的问题是，如果用户在第一个选择框中选择'Bank A'，我希望第二个选择框显示'Branch 1' 和'Branch 2'。同样，如果用户选择'Bank B'，我想显示'Branch 3'、'Branch 4' 和'Branch 5'。如果用户在第一次选择中没有选择任何内容（例如没有选择银行），那么第二次选择（分支）不应该包含任何内容。我确定你明白我在说什么？

如何在 AngularJS 中实现这一点？

【问题讨论】：

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

标签： javascript html json angularjs

【解决方案1】：

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

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

分支重复的来源分配给范围内的getBranches()函数，这里我们传递之前选择的银行名称。

在那个函数中

$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) {...

这里是DEMO

如果您可以将您的选择更改为类似下面的内容，它会更简洁:)

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

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

这里我们可以使用选中的银行对象来获取分行为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>

这样我们就可以摆脱getBranches()。

这里是DEMO

【讨论】：