2つのドロップダウンでAngularjsの値をフィルタリングする

Question

私は簡単に処理できない問題があります。

私はドロップダウン用のデータを持っており、そのドロップダウンで選択されている値によっては、2番目のドロップダウンでデータを変更したい場合は、最初のドロップダウンが選択されるまで非表示にします。

Atm、私は最初のコントローラを選ぶことができますが、2つのドロップダウンを接続する方法はありません。

ご協力いただきますようお願い申し上げます。事前にありがとう

新しいテストサービス

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> 

Answer 1

モミstの両方のselect要素にはng-model = "release"があります。これはコントローラにバインドされているデータフィールドです。 2番目のselect要素はng-model = "environment"のようなものでなければなりません。

$ ctrl.options.releases [リリース]の環境でng-options = "env"のようなオプションを使用して選択したリリースに基づいて環境リストを変更できるようにする必要があります。 .environments "

最後に、リリースが値を持つリリースに基づいてng-Show属性で選択されるまで、環境選択を隠すことができます。 ng-Show = "release> 0"のようなものを作成者のコンストラクタで0に初期化します。ヘルプ@Jimムーアのため

Answer 2

おかげで、私はガイドラインhttps://jsfiddle.net/annavester/Zd6uX/

のために続く良いフィドルのリンクを発見したと私はにも>

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

とhtmlに私のデータのJSONを変更しました今後同じ問題を抱える人にとっては、これが役立つことを願っています。

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