如何使用Angular.js將下拉值設置為空白

Question

我需要一個幫助，使用Angular.js完成一項操作后，需要將下拉值設置為空白，我在下面解釋我的代碼。

<div style="height:270px; overflow-x:hidden; overflow-y:scroll;" ng-show="viewOrderTable">
<div class="table-responsive dashboard-demo-table">
<select class="form-control"  id="status" ng-model="order_status" ng-change="changeOrderStatus(order_id,shipping_email,p.pro_data_id,order_status,p.days)">
 <option value="">Select Status</option>
                                                        <option value="In-progress">IN-PROGRESS</option>
 <option value="Dispatch">DISPATCH</option>
 <option value="Delivered">DELIVERED</option>
<option value="canceled" ng-if="p.pro_status =='Ordered' && p.pro_status=='In-progress'">CANCELED</option>
 <option value="Returned" ng-if="p.days <= 48 && p.pro_status=='Delivered'">RETURN</option>
 </select>
</div>
</div>

從上面的列表中，當用戶選擇DISPATCH ，下面的表格正在打開。

<div class="" ng-show="viewDispatch">
<div style="padding-bottom:20px;">
<div class="col-md-6">
                            <div class="input-group bmargindiv1 col-md-12">
                            <span class="input-group-addon ndrftextwidth" style="width:120px; text-align:left;">Dispatched Date& Time :</span>
                            <div class="datepicker" date-format="dd-MM-y h:mm:ss" button-prev='<i class="fa fa-arrow-circle-left"></i>' button-next='<i class="fa fa-arrow-circle-right"></i>'> 
                                <input type="text" name="dispatch_date" class="form-control" id="dispatch_date" ng-model="dispatch_date" placeholder="Add Dispatched Date& Time" ng-change="clearField('dispatch_date');" />
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="col-md-12 text-right">
                        <button type="button" class="btn btn-success" ng-click="addDispatchData();">Submit</button> <button type="button" class="btn btn-danger" ng-click="clearDispatchData();">Back</button>
                    </div>
</div>
</div>

下面給出了此操作的控制器端代碼。

$scope.changeOrderStatus=function(orderid,email,prodataid,order_status,hour){
    if(order_status=='Dispatch'){
                $scope.viewOrderTable=false;
                $scope.viewDispatch=true;
                pro_dataId=prodataid;
                order_Id=orderid;
                dStatus=order_status;
                email=email;
            }
}

當用戶單擊后退按鈕時，它再次回到其原始狀態，但下拉菜單中顯示了DISPATCH選項，我需要再次重置下拉列表。

$scope.clearDispatchData=function(){
        $scope.viewOrderTable=true;
        $scope.viewDispatch=false;
        $scope.order_status='';
    }

我確實喜歡上面的內容，但它沒有重置。請幫助我解決此問題。

Answer 1

您可以在html文件中為此使用ng-init

<select class="form-control"  id="status" ng-model="order_status" ng-change="changeOrderStatus(order_id,shipping_email,p.pro_data_id,order_status,p.days)" ng-init='order_status == 0'>

Answer 2

可能是摘要問題，您可以嘗試使用$timeout因此在使用前應在控制器中注入$timeout 。

$scope.clearDispatchData=function(){
     $timeout(function() {
          $scope.viewOrderTable=true;
          $scope.viewDispatch=false;
          $scope.order_status='';
     });  
}