一旦選擇了選擇，清除之前的輸入

Question

一旦用戶使用angularjs從下拉列表中選擇，我將如何清除輸入框。

每當選擇完成後清除輸入框。

這裏是我放在一起樣本：

http://jsfiddle.net/abuhamzah/jb1j3w7x/

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <div class="col-xs-12"> 
     <label class="col-xs-6 control-label">Type:</label> 
     <div class="col-xs-6"> 
     <select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme(payment.type)" > 
      <option ng-option value="Cash">Cash</option> 
      <option ng-option value="Check">Check</option> 
      <option ng-option value="Money Order">Money Order</option> 
     </select> 
     </div> 
    </div> 
    {{ payment.cash }} 
    <div class="col-xs-12" id="cash" ng-if="payment.type == 'Cash'"> 
     <div > 
     <label class="col-xs-6 control-label">Cash :</label> 
     <div class="col-xs-6"> 
     </div> 
     </div> 
    </div> 

    <div class="col-xs-12" id="check" ng-if="payment.type == 'Check'"> 
     <div > 
     <label class="col-xs-6 control-label">check :</label> 
     <div class="col-xs-6"> 
     </div> 
     </div> 
    </div> 

    <div class="col-xs-12" id="money_order" ng-if="payment.type == 'Money Order'"> 
     <div > 
     <label class="col-xs-6 control-label">money_order :</label> 
     <div class="col-xs-6"> 
     </div> 
     </div> 
    </div> 


<div class="col-xs-12" ng-if="payment.type == 'Check' || payment.type == 'Money Order' || payment.type == 'Cash'"> 
     <div > 
     <div class="col-xs-6"><input type="number" class="form-control" ng-model="payment_input"/>{{payment.type}}</div> 

    </div>   
</div> 


var myApp = angular.module('myApp',[]); 


function MyCtrl($scope) { 

    $scope.changeme = function() { 
     alert(payment.type); 
     payment_input=''; 
    } 
} 

Answer 1

您可以$watch，這是專爲這個目的這樣做更容易。

在你的控制器：

$scope.$watch('payment.type', function (newVal, oldVal) { 
    $scope.payment_input = 0; 
    // anything else you want to do when the payment type is changed 
}) 

現在，每當payment.type改變，這些線路將被執行。

這裏有更多的文檔：https://docs.angularjs.org/api/ng/type/$rootScope.Scope

編輯

下面是一個工作撥弄你的代碼：http://jsfiddle.net/jb1j3w7x/5/

Answer 2

您需要使用ng-show而不是ng-if輸入元素container因爲原因如下

ngIf指令基於{表達式}刪除或重新創建DOM樹的一部分 。如果分配給ngIf的表達式將 評估爲false值，則將該元素從DOM中移除，否則將該元素的一個 克隆重新插入到DOM中。

方法1：（使用控制器）

工作演示：http://jsfiddle.net/jb1j3w7x/2/

方法2：（你可以更新，而不控制模型）

工作演示：http://jsfiddle.net/jb1j3w7x/4/

而且，

• 您錯過了添加$範圍以更新號碼字段
• 號碼字段應該更新爲號碼。我們不能更新爲空 文本