異なる値が

Question

私は、次の内容のテンプレートを持っています。

第二セレクタは第一セレクタで選択された値に基づいて移入されます。 $scope.idsは同じままですが、ファーストセレクタで選択された値に基づいて、$scope.valuesの値は変更する必要がありますが、他のすべてのセカンダリセレクタに影響します。

$scope.valuesの値は、それぞれセカンドセレクタで異なる必要がありますが、この問題をどのように解決できますか。

Answer 1

最初にonchangeイベントを聞き、$scope.valuesの値を選択した$scope.idのベースに再割り当てします。

Answer 2

私は、角度4で動作し、私はそれを処理し、あなたがangualrjsを使用してそれを解決する方法を伝えることができます： あなたは（ngModelChange）を聞くことができる。このようなイベント：

<select class="form-control" 
          title="Choose one of the following..." 
          name="govSelect" 
          required 
          #gover="ngModel" 
          [(ngModel)]="selectedGov" 
          (ngModelChange)="onUpdateGov($event)"> 

        <option *ngFor="let gov of allLookUps.governorateDataModels" value="{{gov.code}}">{{translate.currentLang === 'en-gb' ? gov.namePrimaryLang : gov.nameSecondaryLang}}</option> 

        </select> 

、あなたがフィルタリングすることができますonUpdateGovにおける第2の結果（）は、このような方法：

onUpdateGov(newGov) { 
    this.selectedGov = newGov; 

    this.allLookUps.governorateDataModels.filter(
     (governrate) => { 
     if(governrate.code === newGov) { 
     this.cities = governrate.cityDataModels; 
     } 
    }); 
    } 

及び第二この場合 都市になり、フィルタの結果に選択的に結合し、これは第二の選択である：

<select class="form-control" 
          title="Choose one of the following..." 
          name="citySelect" 
          [(ngModel)]="selectedCity" 
          required 
          #cit="ngModel" 
          (ngModelChange)="onUpdateCity($event)"> 

        <option *ngFor="let c of cities" value="{{c.code}}">{{translate.currentLang === 'en-gb' ? c.namePrimaryLang : c.nameSecondaryLang}}</option> 

        </select> 

あなたはng-changeディレクティブでng-modelディレクティブを使用し

Answer 3

をangularjsするためにこれを変換することができます：AngularJS <select> Directive API Referenceを参照してください

<div class="container"> 
    <select class="first-selector" ng-model="firstSel" 
      ng-change="updateValues(firstSel)"> 
     <option ng-repeat="item in ids" ng-value="item.id">{{item.id}}</option> 
    </select> 
    <select class="second-selector" ng-model="secondSel"> 
     <option ng-repeat="item in values" ng-value="item.id">{{item.value}} 
     </option> 
    </select> 
</div> 

JS

$scope.updateValues = function(sel) { 
    //Update values here 
}; 

。