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

0tdrvxhp 于 2021-09-29 发布在 Java

关注(0)|答案(1)|浏览(384)

我尝试使用单选按钮在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>

这是Angular 代码

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

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

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

JavaScript Html asp.net-mvc angularjs

来源：https://stackoverflow.com/questions/67965752/how-to-toggle-between-divs-using-two-radio-buttons-in-angularjs

1条答案

按热度按时间

xurqigkl1#

控制器代码

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

希望它能很容易地帮助你。

赞(0）回复(0）举报 2021-09-29

我来回答

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

1条答案

相关问题

热门标签

最新问答