根據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中做到這一點？

來源

2015-09-28 Tiwaz89

你可以創建一個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

來源

2015-09-28 12:13:24

根據AngularJS中另一個選擇元素的值設置選擇選項

回答

相關問題