I need to reset all drop down values to empty values,currently I am default the state and metro based on zip code I am getting from back-end.
Here one more issue is angular removing the empty select option once I select any value in the drop down, so reset button should reset field values to empty values.
I wrote code for reset but it is not working. Any help on this appreciated.
Javascript Code:
$scope.myFunction = function()
{
document.getElementById("myForm").reset();
}
HTML Code:
<form name="myForm">
<div ng-show='showFilterData' class="box2">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Filters</h3>
</div>
<span ng-show="!myForm.$valid && myForm.$error.required">Please select the mandatory field</span>
<div class="dropdown-fields">
<div class="panel-body">
<div class="form-group" ng-repeat="(key, productItem) in productItems" >
<label>{{productItem.Name}}</label>
<span class="error-message" ng-show="!productItem.APTS_UI_Selection_Optional__c">*</span>
<p>
<div ng-if="!productItem.APTS_Dependent_Attribute__c && selectedProductItem.Id != '01t30000003iyXzAAI'">
<select name="statesel" ng-init="Select" class="form-control" style="width:auto" ng-model="productItem[productItem.Name]" ng-change="onStateChangeDD(productItem[productItem.Name], key, productItem)" ng-options="ddItem.Name as removeAmparsendFilter(ddItem.Name) for ddItem in productItem.ddData | orderBy:'Name'" ng-required="true">
</select>
</div>
<div ng-if="productItem.APTS_Dependent_Attribute__c && selectedProductItem.Id != '01t30000003iyXzAAI'">
<select name="metrosel" ng-init="Select" class="form-control" style="width:auto" ng-model="productItem[productItem.Name]" ng-change="onStateChangeDD(productItem[productItem.Name], key, productItem)" ng-options="ddItem.Name as removeAmparsendFilter(ddItem.Name) for ddItem in productItem.filterData | orderBy:'Name'" ng-required="true" >
</select>
</div>
</p>
<p>
<div ng-if="!productItem.APTS_Dependent_Attribute__c && selectedProductItem.Id == '01t30000003iyXzAAI'">
<div ng-if="productItem.APTS_Display_Order__c == '1' ">
<select ng-init="Select" class="form-control" style="width:auto" ng-model="productItem[productItem.Name]" ng-change="onStateChangeDD(productItem[productItem.Name], key, productItem)" ng-options="ddItem.Name as removeAmparsendFilter(ddItem.Name) for ddItem in productItem.ddData | orderBy:'Name'" >
</select>
</div>
<div ng-if="productItem.APTS_Display_Order__c == '3' ">
<select ng-init="Select" class="form-control" style="width:auto" ng-model="productItem[productItem.Name]" ng-change="onStateChangeDD(productItem[productItem.Name], key, productItem)" ng-options="ddItem.Name as removeAmparsendFilter(ddItem.Name) for ddItem in productItem.ddData" >
</select>
<h1>pandu</h1>
</div>
</div>
<div ng-if="productItem.APTS_Dependent_Attribute__c && selectedProductItem.Id == '01t30000003iyXzAAI'">
<div ng-if="productItem.APTS_Display_Order__c != '4'">
<select ng-init="Select" class="form-control" style="width:auto" ng-model="productItem[productItem.Name]" ng-change="onStateChangeDD(productItem[productItem.Name], key, productItem)" ng-options="ddItem.Name as removeAmparsendFilter(ddItem.Name) for ddItem in productItem.filterData | orderBy:'Name'" >
</select>
</div>
</div>
<div ng-if="productItem.APTS_Display_Order__c == '4' && selectedProductItem.Id == '01t30000003iyXzAAI'">
<div>
<input type="text" ng-blur="attoerneyPRValue(attoerneyPR)" ng-model="attoerneyPR"/>
</div>
</div>
</p>
</div>
</div>
<div class="getresults-btn">
<button type="submit" class="btn btn-info" ng-disabled="!myForm.$valid " ng-click="getattributeCombination()">Search</button>
<button type="button" ng-click="myFunction()"> reset </button>
<div><br></br></div>
<div class="alert alert-danger" ng-show="showSuccessAlert" >
<span> <strong> Your results are more than 600 lines. First 600 lines have been shown. Please narrow results using the provided filters.</strong></span>
<button type="button" class="close" data-ng-click="switchBool('showSuccessAlert')">x</button>
</div>
</div>
</div>
</div>
</div>
</form>
you can do this with below tweak in your myFunction , since all the select box has this array as a model with different keys, you can reset the array in your function if it contain any other model name you need to reset this as well, like i reset attoerneyPR
model manually in function
$scope.myFunction = function(){
$scope.productItem = {};
$scope.attoerneyPR = '';
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.