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

Question

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

我试过以下解决方案

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

这是angular代码

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

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

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

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

希望对您有所帮助。

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

how to toggle between divs using two radio buttons in angularjs

html

javascript

asp.net-mvc

angularjs