gpt4 book ai didi

angularjs - 显示/隐藏div取决于AngularJS中的下拉列表选择

转载 作者:行者123 更新时间:2023-12-04 16:39:25 29 4
gpt4 key购买 nike

我试图显示一个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>

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


function MyCtrl($scope) {

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

最佳答案

您没有初始化为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.

关于angularjs - 显示/隐藏div取决于AngularJS中的下拉列表选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27054176/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com