Очистить предыдущий вход, как только выбор выбран

Question

Как я могу снять поле ввода после выбора пользователем из раскрывающегося списка с помощью угловых символов.

каждый раз, когда ящик поля ввода выбирается после выбора.

вот что я соединял образец:

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

EDIT

Вот рабочая скрипку с кодом:http://jsfiddle.net/jb1j3w7x/5/

Answer 2

Вы должны использовать ng-show вместо ng-if для ввода элемента container потому что следующая причина:

Директива ngIf удаляет или воссоздает часть дерева DOM на основе выражения {expression}. Если выражение, присвоенное ngIf, оценивает на ложное значение, тогда элемент удаляется из DOM, в противном случае клон DOM добавляется клон элемента .

Подход 1: (используя контроллер)

Работа демо: http://jsfiddle.net/jb1j3w7x/2/

подход 2: (вы можете обновить модель без контроллера)

Работа демо: http://jsfiddle.net/jb1j3w7x/4/

Также ,

• Вы пропустили, чтобы добавить $ scope для обновления номера поля
• Поле номера должно быть обновлено как номер. мы не можем обновить как пустой текст