Question

我有两个单选按钮，每个

的选择显示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，因为弹出关闭按钮的相同代码。有线索吗？谢谢

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

    }
});

你应该避免使用Jquery。使用Angularjs
可以实现同样的目的

ng-hide和ng-show无法点击广播

2 个答案: