Mam dwa wybrane pola opcji. Wprowadzone na pierwszą opcję Wybierz opcję Druga opcja Wybierz jest wyłączona. Przypuśćmy, że wybierz drugą wartość wyboru, ustawa to pole. Po wybraniu zaznaczenia pierwszego wyboru pola. Druga wartość pola wyboru jest wyłączona. Ale nie zresetowanie drugiego wyboru wartości pola.

Kod:

<label class="item item-select">
    <span class="input-label">Purchase Type </span>
    <select  name="requiredType" ng-model="bid.requiredType" required>
        <option disabled="" value="">Select Purchase Type</option>
        <option>Partial</option>
        <option>Full</option>
    </select>
</label>
<label class="item item-select">
    <span class="input-label">Purchase Unit</span>
    <select  name="purchaseUnitType" class="form-control"
        ng-model="bid.purchaseUnitType"
        ng-disabled="bid.requiredType=='Full'"
        x-ng-change="checkUnitType(bid.purchaseUnitType)"                                                   required="required">
        <option disabled="" value="">Select Purchase Unit</option>
        <option>Kg</option>
        <option>Quintal</option>
        <option>Ton</option>
    </select>
</label>
0
sweety 30 czerwiec 2017, 08:58

3 odpowiedzi

Najlepsza odpowiedź

Możesz wywołać funkcję ng-change, aby zresetować wartość drugiego filtra.

js :

  $scope.reset=function(){
  $scope.bid.purchaseUnitType="";
  }

html :

 <select  name="requiredType" ng-model="bid.requiredType" required ng-change="reset()">
        <option disabled="" value="">Select Purchase Type</option>
        <option>Partial</option>
        <option>Full</option>
    </select>

Pracujący JSFiddle : https://jsfiddle.net/m9oq9tqq/

1
Vivz 30 czerwiec 2017, 06:14

Jeśli chcesz zresetować drugą listę rozwijaną wybraną wartość, musisz dodać ng-change na pierwszym rozwijaniu.

Zaktualizowano HTML:

<label class="item item-select">
    <span class="input-label">Purchase Type </span>
    <select  name="requiredType" ng-model="bid.requiredType" required ng-change="vm.onRequiredTypeChanged()">
        <option disabled="" value="">Select Purchase Type</option>
        <option>Partial</option>
        <option>Full</option>
    </select>
</label>

JS

self.onRequiredTypeChanged = function(){
    $scope.bid.purchaseUnitType = null;
}
1
Tjaart van der Walt 30 czerwiec 2017, 06:13

Po prostu musisz skojarzyć ng-change w pierwszym polu Wybierz, tak, że gdy opcja w pierwszym polu SELECT jest zmiana lub wybrana opcja Druga opcja Wybierz pole jest resetowane. Za wyłączenie tego samego kodu działa

HTML

<div ng-app='app' ng-controller='mainCtrl'>
   <label class="item item-select">
    <span class="input-label">Purchase Type </span>
    <select  name="requiredType" ng-model="bid.requiredType" ng-change='changeFirstSelectBox()' required>
        <option disabled="" value="">Select Purchase Type</option>
        <option>Partial</option>
        <option>Full</option>
    </select>
</label>
<label class="item item-select">
    <span class="input-label">Purchase Unit</span>
    <select  name="purchaseUnitType" class="form-control"
        ng-model="bid.purchaseUnitType"
        ng-disabled="bid.requiredType=='Full'"
        x-ng-change="checkUnitType(bid.purchaseUnitType)"                                                   required="required">
        <option disabled="" value="">Select Purchase Unit</option>
        <option>Kg</option>
        <option>Quintal</option>
        <option>Ton</option>
    </select>
</label>
</div>

Kontroler

angular.module('app',['QuickList']).controller('mainCtrl', function($scope){
   $scope.changeFirstSelectBox = function(){
       $scope.bid.purchaseUnitType = '';
   }  

})

Zauważ, że właśnie zresetowałem wartość drugiego wybierz pole w funkcji changeFirstSelectBox (). W przypadku prostoty i dalszych obejść tutaj jest link do JSFiddle.

1
Ankit Agarwal 30 czerwiec 2017, 06:11