在angularjs中输入无线电切换div答案

【问题标题】：Input radio switching div in angularjs在angularjs中输入无线电切换div
【发布时间】：2017-08-18 14:46:26
【问题描述】：

我知道我可以这么简单地切换 div 显示/隐藏：

<input type="checkbox" ng-model="checked"><br />
<div class="check-element animate-show-hide" ng-show="checked">
  I show up when your checkbox is checked.
</div>

当输入类型为复选框时。但我想有两个输入类型的收音机并切换两个 div 显示/隐藏。

<input type="radio" name="same" />
<input type="radio" name="same" />

如何做到这一点？工作示例将不胜感激。

【问题讨论】：

标签： javascript angularjs input radio-button checked

【解决方案1】：

试试这个

<input type="radio" name="same" ng-model="checked" value="true" />
<input type="radio" name="same" ng-model="checked" value="false" />
<div class="check-element animate-show-hide" ng-show="checked=='true'">
  I show up when your checkbox is checked.
</div>

【讨论】：

无法正常工作plnkr.co/edit/Rg92yvGhTTE4wXgk92dL?p=preview
哦，我的错字出现了一些错误，我在 ng-show 中使用了单等号，我已经更新了我的代码，可以使用 plunker
谢谢！我如何添加以便在第一次加载页面时检查第一个输入？我尝试在的末尾简单地添加“checked”，但在这种情况下它并没有使其被选中。

【解决方案2】：

你试过了吗？

<input type="radio" name="showDiv" ng-model="checked1"><br />
<input type="radio" name="showDiv" ng-model="checked2"><br />

<div class="check-element animate-show-hide" ng-show="checked">
  I show up when your checkbox1 is checked.
</div>
<div class="check-element animate-show-hide" ng-show="checked2">
  I show up when your checkbox2 is checked.
</div>

或者你想要一些具体的东西？

【讨论】：

是的，我不想同时显示两个 div，这就是为什么我想使用 input type="radio" 而不是复选框。因此，具有相同名称属性的它们永远不会同时被检查在一起。我想在选中输入类型单选号 1 时显示 div1，并在选中输入类型单选号 2 时显示 div2。

【解决方案3】：

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

myApp.controller('ctrl', ['$scope', function($scope) {
  $scope.checked = 'true'; 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">

<input type="radio" ng-model="checked" value="true"> true
<input type="radio" ng-model="checked" value="false">false
<div class="check-element animate-show-hide" ng-show="checked">
  I show up when your checkbox is checked.
</div>
</div>

【讨论】：

就像我之前写的那样，我不想同时检查 2 个输入，这就是为什么我问如何使用 input type = RADIO 而不是复选框来实现这一点。