Question

一旦用户从使用angularjs的下拉列表中选择，我将如何清除输入框。

每次选择后清除输入框。

这是我把样本放在一起的内容：

<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中删除该元素，否则为a 将元素的克隆重新插入DOM。

方法1 :(使用控制器）

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

方法2 :(您可以在没有控制器的情况下更新模型）

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

此外，

您错过了添加$ scope来更新数字字段
数字字段应更新为数字。我们不能更新为空文本

选择选择后，清除先前的输入

2 个答案: