ng-hide 和 ng-show 不适用于单选点击

Question

我有 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;

    }
});

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

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

Answer 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();

    }
});

You should avoid using Jquery. Same can be achieved using Angularjs

ng-hide 和 ng-show 不适用于单选点击

ng-hide and ng-show not working on radio click

radio

angularjs