Question

我有一个包含以下内容的模板：

<div class="container">
   <select class="first-selector">
      <option ng-repeat="item in ids">{{item.id}}</option>
   </select>
   <select class="second-selector">
      <option ng-repeat="item in values">{{item.value}}</option>
   </select>
</div>

我会多次动态地将此模板包含在我的应用中。

第二选择器将根据第一选择器中选择的值进行填充。 $scope.ids将保持不变，但根据第一选择器中选择的值，$scope.values中的值应更改，但会影响所有其他第二选择器。< / p>

如何解决此问题，$scope.values中的值对于每个第二选择器应该不同。

Answer 1

将ng-model指令与ng-change指令一起使用：

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

有关详细信息，请参阅AngularJS <select> Directive API Reference。

Answer 2

在第一次选择时收听sequenceA [(+1)] 2 = [3]个事件，并根据所选的onchange重新指定$scope.values的值。

Answer 3

我使用角度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（）方法中过滤第二个结果，如下所示：

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>

你可以把它翻译成angularjs

基于使用angularJS的条件的范围变量的不同值

3 个答案: