Question

我几乎一直在努力命名这个问题，因为我和实际的问题一样！我有两个选择：

选择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中实现这一目标？

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

这里我们可以使用选定的bank对象将分支设为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

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

1 个答案: