我是使用Angular js进行Web开发的新手。我正在尝试使用类在div内显示和隐藏文本框。我有两个单选按钮“是”和“否”。因此,当我单击“是”时,我试图显示包含文本框的div,当我单击“否”时,我隐藏它。
现在,我尝试仅使用ng-class和ng-model而不使用ng-show来执行此操作/ ng-hide。
当我使用ng-checked =“ true”来默认单击单选按钮(例如,是)时,为什么div不显示,而仅在按钮单击时再次显示。ng-class不能通过ng-checked工作。
小提琴
<label class="ui-radio checkbox-inline"> <input type="radio" name="toggle1" data-check="1" value="Yes" ng-model="request_same" /> <span> Yes </span> </label>
<label class="ui-radio checkbox-inline"> <input type="radio" ng-Checked="true" name="toggle1" data-check="2" value="No" ng-model="request_same" /> <span> No </span> </label>
不使用ng-check
它只会选择一个单选框,但不会更新ng-model值。而不是进行ng-checked使用ng-init
并设置model的值。
工作HTML
<div ng-app>
<div class="radioToggle1">
<div class="col-xs-12 form-group" id="request_same" ng-init="request_same='Yes'" >
<p>Yes or no</p>
<label class="ui-radio checkbox-inline">
<input type="radio" name="toggle1" data-check="1" value="Yes" ng-model="request_same" /> <span> Yes </span>
</label>
<label class="ui-radio checkbox-inline">
<input type="radio" name="toggle1" data-check="2" value="No" ng-model="request_same" /> <span> No </span>
</label>
</div>
<div data-show="1" ng-class="{ active : request_same == 'Yes' }" class="hide-div">
<div class="col-xs-12 col-md-12 borderTop">
<h5> <strong> Vendor Details </strong> </h5>
<input type="text" />
</div>
</div>
</div>
<div data-show="2"></div>
</div>
刚添加的hide-div
类默认情况下隐藏div。然后ng-class
根据条件决定是否显示元素。
希望这可以对您有所帮助。谢谢。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句