angularjsの無効な値をリセットする方法

Question

私は2つの選択肢のボックスを持っています。最初の選択肢の選択肢に基づいています。私がセカンドセレクトボックスの値を選択していると仮定して、そのボックスを設定しています。私は最初の選択ボックスを選択するつもりです。 2番目の選択ボックスの値は無効です。 2番目の選択ボックスの値はリセットされません。

コード：

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

Answer 1

あなたは第二のフィルタの値をリセットするためにng-change機能を呼び出すことができます。

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> 

ワーキングJSFiddle：あなたは、単に最初の選択ボックスにng-changeを関連付ける必要がありhttps://jsfiddle.net/m9oq9tqq/

Answer 2

トンので、最初の選択ボックスのオプションが変更または選択されている場合、2番目の選択ボックスオプションがリセットされます。無効に同じコードが

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> 

を作品コントローラ

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

}) 

私はちょうど機能changeFirstSelectBox()内側の第2の選択ボックスの値をリセットしていることに注意してください。ここでのシンプルさとさらなる回避策はJSFIDDLEへのリンクです。

Answer 3

2番目のドロップダウン選択値をリセットする必要がある場合は、最初のドロップダウンにng-changeを追加する必要があります。

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