Question

我有两个选择选项框。基于第一个选择选项，第二个选择选项被禁用。假设我选择第二个选择框值正在设置该框。在我要选择第一个选择框之后。第二个选择框值被禁用。但不重置第二个选择框值。

代码：

<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 ：https://jsfiddle.net/m9oq9tqq/

Answer 2

您只需要在第一个选择框中关联ng-change，以便在更改或选择第一个选择框中的选项时重置第二个选择框选项。对于禁用相同的代码工作

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 ()内重置了第二个选择框的值。这里的简单性和进一步的解决方法是指向JSFIDDLE的链接。

Answer 3

如果您需要重置第二个下拉列表选择值，则需要在第一个下拉列表中添加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;
}

如何重置angularjs中的禁用值

3 个答案: