如何在视图中的下拉选择中将模型的值设置为空 [英] how to set the value of model empty on dropdown selection in view

问题描述

我正在处理AngularJS中的需求，我需要根据下拉选择更改div.基本上有两个div，一个包含一个下拉列表，另一个包含一个文本框(两个div都具有相同的模型名称city).

I'm working on a requirement in AngularJS where I need to change a div based on the dropdown selection. There are two div's basically, one contains a dropdown and another contains a textbox(both div's have the same model name city).Now, the other dropdown on whose value the div will chnage is state.

  <div class="col-xs-6 col-sm-4" ng-if="addressdetail.address.state == 'NewDelhi'">
                    <label for="city">
                        City
                    </label>
                    <select selectpicker="city1List" title="Select" id="City" style="" name="City" ng-model="addressdetail.address.city"
                    class="selectpicker" ng-options="obj.code as obj.desc for obj in city1List">
                        <option value="">
                        </option>
                    </select>

                </div>

                 <div class="col-xs-6 col-sm-4" ng-if="addressdetail.address.state != 'NewDelhi'">
                    <label for="City">                            
                                   City                            
                    </label>

                    <input id="City" style="" name="City" value="" ng-model="addressdetail.address.city" class="form-control"
                    type="text">
                </div>



                <div class="col-xs-6  col-md-4 col-sm-4 ">
                    <label for="state">
                        State
                    </label>
                    <select selectpicker="state1List" title="Select" id="State" style="" name="State" ng-model="addressdetail.address.state"
                    class="selectpicker" ng-options="obj.code as obj.desc for obj in state1List">
                        <option value="">
                        </option>
                    </select>
                </div>

现在一切正常，但是在选择状态下拉列表后，我不知道如何将文本框的值更改为空，并将下拉列表更改为空.

Now everything works fine, but I don't know how to change the value of textbox to empty and dropdown to empty after the selection of the state dropdown.

推荐答案

在状态选择中调用 ng-change 中的角度函数，并将所需的模型设置为空值.

Call angular function in ng-change in selection of state and make required model to empty value.

<select selectpicker="state1List" title="Select" id="State" style="" name="State" ng-model="addressdetail.address.state"
                    class="selectpicker" ng-options="obj.code as obj.desc for obj in state1List" 
ng-change="resetCity()">
                        <option value="">
                        </option>
                    </select>

在控制器中写入以下功能.

Write below function in your controller.

$scope.resetCity = function (){
    $scope.addressdetail.address.city=YOUR_DFAULT_VALUE;
};

调用函数(如果状态的< select> 有任何更改).

call function if any change in <select> of state.

这篇关于如何在视图中的下拉选择中将模型的值设置为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！