javascript - 在 Angular js 1.5.6 中将下拉字段值重置为默认值

Question

我需要将所有下拉值重置为空值，目前我默认状态和地铁基于我从后端获得的邮政编码。

这里还有一个问题是，一旦我在下拉列表中选择任何值，angular 就会删除空的选择选项，因此重置按钮应该将字段值重置为空值。

我编写了重置代码，但它不起作用。对此的任何帮助表示赞赏。

Javascript 代码:

$scope.myFunction = function()
{
document.getElementById("myForm").reset();
}

HTML代码:

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

Answer 1

您可以在 myFunction 中通过以下调整来执行此操作，因为所有选择框都将此数组作为具有不同键的模型，如果它包含您需要将其重置为的任何其他模型名称，您可以在函数中重置数组好吧，就像我在函数中手动重置 attoerneyPR 模型

$scope.myFunction = function(){
    $scope.productItem = {};
    $scope.attoerneyPR = '';
}