默认情况下,单选按钮 ng-checked 不显示 div,仅在点击时有效
Radiobuttons ng-checked not displaying div by default and works only onclick
我是使用 Angular js 进行 Web 开发的新手。我正在尝试使用 class 在 div 中显示和隐藏文本框。我有两个单选按钮 "Yes" 和 "No"。因此,我尝试在单击“是”时显示包含文本框的 div,在单击“否”时隐藏。
现在,我正在尝试仅使用 ng-class 和 ng-model 而不是使用 ng-show/ng-hide 来执行此操作。
当我使用 ng-checked="true" 保持默认单击单选按钮(说是)时,为什么 div 不显示并且仅在再次单击按钮时显示。 ng-checked 对 ng-class.
不起作用吗
Fiddle
<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
它只会 select 一个单选框但是,它不会更新 ng-model 值。而不是做 ng-checked 使用 ng-init
并设置模型的值。
工作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
class 以默认隐藏 div。然后ng-class
将根据条件决定是否显示元素。
希望这对您有所帮助。谢谢。
我是使用 Angular js 进行 Web 开发的新手。我正在尝试使用 class 在 div 中显示和隐藏文本框。我有两个单选按钮 "Yes" 和 "No"。因此,我尝试在单击“是”时显示包含文本框的 div,在单击“否”时隐藏。
现在,我正在尝试仅使用 ng-class 和 ng-model 而不是使用 ng-show/ng-hide 来执行此操作。
当我使用 ng-checked="true" 保持默认单击单选按钮(说是)时,为什么 div 不显示并且仅在再次单击按钮时显示。 ng-checked 对 ng-class.
不起作用吗
Fiddle
<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
它只会 select 一个单选框但是,它不会更新 ng-model 值。而不是做 ng-checked 使用 ng-init
并设置模型的值。
工作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
class 以默认隐藏 div。然后ng-class
将根据条件决定是否显示元素。
希望这对您有所帮助。谢谢。