在 angularjs 中输入无线电切换 div

Question

我知道我可以切换 div show/hide 就这么简单：

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

当输入类型为复选框时。但我想有两个输入型收音机和开关两个 divs show/hide。

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

如何实现？工作示例将不胜感激。

Answer 1

你试过吗？

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

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

Answer 2

试试这个

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

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

在 angularjs 中输入无线电切换 div

Input radio switching div in angularjs

javascript

angularjs

input

radio-button

checked