2014-11-21 89 views
5

我想显示一个div,具体取决于从下拉列表中选择的内容。例如,如果从列表中显示的现金股利或如果用户的用户选择“现金”从列表中选择显示检测格“查询”显示/隐藏div取决于在AngularJS中的下拉列表选择

我已经把样本,但它的不完整,需要线了

http://jsfiddle.net/abuhamzah/nq1eyj1v/

而且当用户更改选择我也想清除以前的选择,所以当用户回到以前的选择,他们不应该看到。

<div 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()" > 
      <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> 
    <div class="col-xs-12" id="cash"> 
     <div > 
     <label class="col-xs-6 control-label">Cash :</label> 
     <div class="col-xs-6"> 
      <input type="number" class="form-control" ng-model="payment.cash" /> 
     </div> 
     </div> 
    </div> 

    <div class="col-xs-12" id="check"> 
     <div > 
     <label class="col-xs-6 control-label">check :</label> 
     <div class="col-xs-6"> 
      <input type="number" class="form-control" ng-model="payment.check" /> 
     </div> 
     </div> 
    </div> 

    <div class="col-xs-12" id="money_order"> 
     <div > 
     <label class="col-xs-6 control-label">money_order :</label> 
     <div class="col-xs-6"> 
      <input type="number" class="form-control" ng-model="payment.money_order" /> 
     </div> 
     </div> 
    </div> 

</div> 

//控制器:

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


function MyCtrl($scope) { 

    $scope.changeme = function() { 
    alert('here'); 
    } 
} 

回答

13

你没有初始化为angular app怎么把ü错过了ng-app指令第一

,这是使用该解决方案ng-if

DEMO

<div ng-app="myApp" ng-controller="MyCtrl"> // initialize as a angular app 

<div class="col-xs-12" id="cash" ng-if="payment.type == 'Cash'"> // this div will show if the value of `payment.type` model equals to `cash`. and so on. 
相关问题