在AngularJS中根据下拉选择显示/隐藏div。

Question

我试图展示一个div，具体视下拉列表所选择的内容而定。例如，如果用户从列表中选择了'现金'，则显示现金div，或者如果用户选择了'支票'，则显示支票div。

我已经编写了一个示例，但它还不完整，需要进行连线。

同时，当用户更改选择时，我还想清除先前的选择，以便当用户返回到之前的选择时不再看到它。

参考链接：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');
  }
}

- Nick Kahn

Answer 1

因为您错过了首要的ng-app指令，所以您没有初始化作为Angular应用程序。

以下是使用ng-if的解决方案：

演示

<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.

- Kalhan.Toress

---

当页面加载时，如果支付对象为 Null/Undefined，则意味着我不需要基于 ng-if 条件选择该选项，如何给出对象为 NULL/Undefined 的条件？ - Vignesh R