如何使用angularjs中的两个单选按钮在div之间切换答案

【问题标题】：how to toggle between divs using two radio buttons in angularjs如何使用angularjs中的两个单选按钮在div之间切换
【发布时间】：2021-08-30 02:15:43
【问题描述】：

我正在尝试使用单选按钮在 html div 之间切换。在页面加载时，我想选择第一个单选按钮和相应的 html div，但是当我单击其他单选按钮时，它应该显示其他 div，然后在单击相应单选按钮时在 div 之间切换

我尝试了以下解决方案

    <div class="form-check">
      <label class="form-check-label">
        <input class="form-check-input radio-inline" type="radio" id="gridRadios1" ng-click="ShowFamilyGroup('YES');">
        Family Group</label>
        <label class="form-check-label">
        <input class="form-check-input radio-inline" type="radio" id="gridRadios2" ng-click="ShowSingle('YES');">
        Single</label>
    </div>

        
<div ng-show="IsFamilyGroupVisible">
        <p>This is family Group</p>   
</div>
<div ng-show="IsSingleVisible">
        <p>This is Individual</p>   
</div>

这里是角码

$scope.ShowFamilyGroup = function (value) {
       $scope.IsFamilyGroupVisible = value == "YES";
    };

    $scope.ShowSingle = function (value) {
        $scope.IsSingleVisible = value == "YES";
    };

我希望在页面加载 FamilyGroup 单选按钮上选中并显示相应的 div，然后如果用户单击单个其他 div 显示隐藏家庭组，反之亦然

【问题讨论】：

标签： javascript html angularjs asp.net-mvc

【解决方案1】：

控制器代码

$scope.is_family = false;
$scope.is_single = false;
$scope.ShowRadioGroupFn = function (value) {
    if (value) {
         console.log('test');
        $scope.is_family = true;
        $scope.is_single = false;
    } else {
        console.log('test1');
        $scope.is_single = true;
        $scope.is_family = false;
    }
}
$scope.ShowRadioGroupFn(true);

HTML 代码

<div class="form-check">
<label class="form-check-label">
    <input type="radio" ng-model="is_family" 
           ng-value="true" 
           ng-checked="is_family"
           ng-click="ShowRadioGroupFn(true)">
    Family Group
</label>
<label class="form-check-label">
    <input type="radio" ng-model="is_single" 
           ng-value="true" 
           ng-checked="!is_family"
           ng-click="ShowRadioGroupFn(false)">
    Single
   </label>
 </div>

<div ng-show="is_family">
   <p>This is family Group</p>
</div>
<div ng-show="is_single">
   <p>This is Individual</p>
</div>

希望它对您有帮助。

【讨论】：