Question

我是Angular js的Web开发新手。我正在尝试使用类在div中显示和隐藏文本框。我有两个单选按钮“是”和“否”。因此，当我点击“是”时，我正在尝试显示包含文本框的div，并在单击“否”时隐藏现在，我正在尝试仅使用ng-class和ng-model而不使用ng-show / ng-hide。

当我使用ng-checked =“true”默认点击一个radiobutton（说“是”）时，为什么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>

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

希望这可以帮到你。感谢。

Radiobuttons ng-checked默认情况下不显示div，仅适用于单击

1 个答案: