单选按钮 ng-checked 默认情况下不显示 div 并且仅在单击时有效答案

【问题标题】：Radiobuttons ng-checked not displaying div by default and works only onclick单选按钮 ng-checked 默认情况下不显示 div 并且仅在单击时有效
【发布时间】：2015-03-21 16:27:12
【问题描述】：

我是使用 Angular js 进行 Web 开发的新手。我正在尝试使用类在 div 中显示和隐藏文本框。我有两个单选按钮 “是” 和 “否”。因此，我试图在单击“是”时显示包含文本框的 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>

【问题讨论】：

你附加的小提琴不起作用

标签： javascript angularjs radio angularjs-ng-init angularjs-ng-checked

【解决方案1】：

不要使用ng-check，它只会选择一个单选框，但不会更新 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 类默认隐藏div。之后ng-class将根据条件决定是否显示元素。

Working Fiddle.

希望这对您有所帮助。谢谢。

【讨论】：