Angularjs在兩個下拉列表上篩選值

我有一個下拉菜單的數據，根據下拉菜單選擇的值，我希望數據在第二個下拉菜單中更改，最好是直到第一個下拉菜單被隱藏。

Atm，我可以選擇第一個控制器，但我不知道如何連接兩個下拉菜單。

任何幫助將不勝感激。謝謝你在前進

新的測試服務

export default class newtest { 
    constructor($http){ 
     'ngInject'; 

     this._$http = $http; 
     let testData = this; 


     this.options = { 
      releases: [ 
       {value: 1, name: 'R1', environments : ['R1-QA1', 'R1-QA2']}, 
       {value: 2, name: 'R2', environments : ['R2-QA1', 'R2-QA2']}, 
       {value: 3, name: 'R3', environments : ['R3-QA1', 'R3-QA2']} 
      ], 
      environments : [ 
      ['R1-QA1', 'R1-QA2'], 
      ['R2-QA1', 'R2-QA2'], 
      ['R3-QA1', 'R3-QA2'] 
      ] 
     }; 
    } 
}

新的測試控制器

class NewTestCtrl { 
    constructor(NewTest, $state, $http) { 
    'ngInject'; 

    this._NewTest = NewTest; 
    this.options = this._NewTest.options; 


    this.releaseValues = this.options.releases.name; 
    this.envValues = []; 
    }

HTML

 <fieldset> 
      <select ng-model="release" ng-options="release.name for release in $ctrl.options.releases"> 
      <option value="" disabled selected>Select</option> 
      <option value="value">{{name}}</option> 
      </select> 
     </fieldset> 

     <fieldset> 
      <select ng-model="release" ng-options="env for environments in $ctrl.options.environments"> 
      <option value="" disabled selected>Select</option> 
      <option value="env">{{env}}</option> 
      </select> 
     </fieldset>

來源

2017-01-30 Nick Ko

杉木st，你的select元素都有ng-model =「release」。這是它在你的控制器中綁定的數據字段。第二個select元素應該是ng-model =「environment」。

您應該能夠根據所選版本使選項使用發佈數據元素來更改環境列表，例如ng-options =「env for $ ctrl.options.releases [release] 。環境「

最後，您可以隱藏環境選擇，直到基於具有值的版本的ng-Show屬性選擇發佈爲止。像ng-Show =「release> 0」，並在構造函數中將release初始化爲0。

來源

2017-01-30 13:41:47

嗨，吉姆，感謝您的答覆，我不拿到$ ctrl.options.releases [發佈] .environments，周圍釋放支架，什麼是他們想在做？ –

選擇用戶選擇的版本數組中的元素。 ng-model =「release」將選定元素的值放入名爲release的變量中。然後你可以使用這個變量來選擇相應的子環境數組。 –

這個概念是太棒了，但似乎無法使其工作。我改變了第二個下拉菜單到這個>

–

感謝您的幫助@Jim穆爾，我找到了一個好提琴鏈接，我遵循的準則https://jsfiddle.net/annavester/Zd6uX/

我改變了我的數據的JSON來>

 environments : { 
      'Release 1' : ['R1-QA1', 'R1-QA2'], 
      'Release 2' : ['R2-QA1', 'R2-QA2'], 
      'Release 3' : ['R3-QA1', 'R3-QA2'] 
     }

，也是HTML來對於將來經歷同樣問題的任何人，我希望這會有所幫助。

 <fieldset> 
      <select id="release" 
        ng-model="$ctrl.release" 
        ng-hide="!$ctrl.browsers" 
        ng-options="release for (release, environments) in $ctrl.environments"> 
      <option value="" disabled selected>Select</option> 
      </select> 
     </fieldset> 


     <fieldset> 
      <select id="environment" 
        ng-model="$ctrl.environment" 
        ng-hide="!$ctrl.release" 
        ng-options="environment for (release, environment) in $ctrl.release"> 
      <option value="" disabled selected>Select</option> 
      </select> 
     </fieldset>

來源

2017-01-30 16:41:25

Angularjs在兩個下拉列表上篩選值

回答

相關問題