ng-hide 和 ng-show 在无线电点击上不起作用答案

【问题标题】：ng-hide and ng-show not working on radio clickng-hide 和 ng-show 在无线电点击上不起作用
【发布时间】：2018-08-01 00:06:39
【问题描述】：

我有 2 个单选按钮和 2 个视图在选择每个按钮时显示

<input  class="inptFileRadio"  type="radio" name="test" value="1" checked><span> one</span>
<input  class="inptFileRadio" type="radio" name="test" value="2"> <span>two Files</span>

我的看法

<div ng-show="diaplyOne"> This is one and default shown </div>
<div ng-show="diaplyTwo"> This is two and shown on click of 2</div>

在我的控制器中：

 $scope.diaplyOne= true;  // Intially this div will be shown
 $scope.diaplyTwo= false; // Initially this is hidden 


$('input:radio[name="test"]').change(
function(){

    if (this.checked && this.value == '2') {
        $scope.diaplyOne= false; // displayone div should be hidden with this 
        $scope.diaplyTwo= true;

    }
});

但这不适用于 Radio，因为我的弹出关闭按钮的代码相同。有什么线索吗？谢谢

【问题讨论】：

为什么两个单选按钮名称相同？
这个输入类型在div里面？？

标签： angularjs radio

【解决方案1】：

你不需要来自jQuery 的任何东西，你已经有一个有很多选项的大库（angularjs），这个示例向你展示了如何使用这个框架的选项很少的代码

var app = angular.module("app", [])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="display = 1">

<input  class="inptFileRadio"  type="radio" name="test" ng-model="display" ng-value="1"><span>1</span>
<input  class="inptFileRadio" type="radio" name="test"  ng-model="display" ng-value="2"> <span>2</span>
<input  class="inptFileRadio" type="radio" name="test"  ng-model="display" ng-value="3"> <span>3</span>

<div ng-show="display === 1"> This is one and default shown </div>
<div ng-show="display === 2"> This is two and shown on click of 2</div>
<div ng-show="display === 3"> This is two and shown on click of 3</div>

</div>

【讨论】：

只有一个查询！我可以对 3 个单选按钮使用相同的查询吗？>
如果您想使用三个，您应该更改 ng-value，例如 1,2,3...我使用布尔值，因为我使用两个收音机。请记住，您也应该更改 ng-show 条件
答案已更新为 3 或可以添加更多类似的选项

【解决方案2】：

问题是因为您正在 Jquery 函数内部进行更改。对于这种情况，您需要手动触发$digest 循环。

$('input:radio[name="test"]').change(
function(){

    if (this.checked && this.value == '2') {
        $scope.diaplyOne= false; // displayone div should be hidden with this 
        $scope.diaplyTwo= true;

       $scope.$apply();

    }
});

您应该避免使用 Jquery。同样可以使用Angularjs实现

【讨论】：