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

问题描述：

对于这个问题，我几乎很困难，因为我对于实际问题提出了这样的问题！我有两个选择：根据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>

选择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？ – Rabi

为什么'ng-repeat ='分支没有人阻止你更新'bankSelected（）'中的'branches' – zeroflagL

@zeroflagL这是否意味着在bankSelected（）中我必须有一个很长的switch语句更新分支列表取决于选择了哪个银行？ – Tiwaz89

答

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

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

相关推荐