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

Set selection options depending on another select element's value in AngularJS

本文关键字：设置 选择 选项 元素 AngularJS 另一个 select 根据      更新时间：2023-09-26

我在命名这个问题时几乎和我在处理实际问题时一样困难!我有两个选择:

选择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中实现这一点?

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>

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

相关文章：