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>

输入类型为复选框时。但我想有两个输入类型的无线电和切换两个div显示/隐藏。

<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

3 个答案: