Javascript-为什么在AngularJS中使用ng if时会出现此错误？

实际上，我正试图根据用户类型显示/隐藏一个div，假设usertype1能够看到该div，但usertype2不能查看该div

HTML代码

<div class="rate animated rubberBand" ng-if="myCheck">
            <input type="radio" id="starRating5" name="rate" value="5" disabled>
            <label for="star5" title="text"></label>
            <input type="radio" id="starRating4" name="rate" value="4" disabled>
            <label for="star4" title="text"></label>
            <input type="radio" id="starRating3" name="rate" value="3" disabled>
            <label for="star3" title="text"></label>
            <input type="radio" id="starRating2" name="rate" value="2" disabled>
            <label for="star2" title="text"></label>
            <input type="radio" id="starRating1" name="rate" value="1" disabled>
            <label for="star1" title="text"></label>
            </div>

JS代码块，它给了我错误信息

    if($scope.Item.starRating === 'NULL'){
        $scope.Item.starRating = 0;
    }

    else if($scope.Item.starRating === '1'){
        document.getElementById("starRating1").checked = true;
    }

    else if($scope.Item.starRating === '2'){
        document.getElementById("starRating2").checked = true;
    }

    else if($scope.Item.starRating === '3'){
        document.getElementById("starRating3").checked = true;
    }

    else if($scope.Item.starRating === '4'){            
        document.getElementById("starRating4").checked = true;
    }
    else{
        document.getElementById("starRating5").checked = true;
    } 

错误

无法将属性“checked”设置为null

我只想为userType1显示div，为userType2显示hide我没有使用JQuery。

更新

---

Pengyy的解决方案中我遇到的唯一问题是，该问题在显示div的userType1中得到了解决，但现在我面临着不应显示div的userType2的问题。在这里，在userType2中，尽管myCheck为false，但无论是使用ng show还是同时使用ng Clope和ng show，div都会显示一会儿，然后消失。对于带有

ng的userType2
，它不应该显示。如果
，当表达式为false时，元素将从DOM中删除。
文件

这将导致
document.getElementById（）
得不到任何回报。
考虑到你的情况，你应该尝试<代码> NG显示< /Cord>。
<div class="rate animated rubberBand" ng-cloak ng-show="mycheck">
    ...
</div>


...
使用
ng if
，当表达式为false时，元素将从DOM中删除。
文件

这将导致
document.getElementById（）
得不到任何回报。
考虑到你的情况，你应该尝试<代码> NG显示< /Cord>。
<div class="rate animated rubberBand" ng-cloak ng-show="mycheck">
    ...
</div>


...

var-app=angular.module（'plunker'，[]）；
app.controller（'MainCtrl'，函数（$scope，$log）{
$scope.userType='userType1'；
$scope.mycheck=true；
$scope.change=function（）{
如果（$scope.userType=='userType2'）
{
$scope.mycheck=false；
}
其他的
{
$scope.mycheck=true；
}
//$log.info（$scope.userType）；
}
});

用户类型1
用户类型2

var-app=angular.module（'plunker'，[]）；
app.controller（'MainCtrl'，函数（$scope，$log）{
$scope.userType='userType1'；
$scope.mycheck=true；
$scope.change=function（）{
如果（$scope.userType=='userType2'）
{
$scope.mycheck=false；
}
其他的
{
$scope.mycheck=true；
}
//$log.info（$scope.userType）；
}
});

用户类型1
用户类型2
您需要跟踪用户类型更改的方法，这仅用于在控制器加载时处理用户类型

$scope.userType = 'userType1';

if ($scope.userType=== 'userType2')
    {
        $scope.myCheck = false;
    }
    else
    {
        $scope.myCheck = true;
    }

因此，您需要添加$watch来监视用户类型的更改

    $scope.$watchCollection("userType ", function(newVal, oldVal){

      $scope.userType = newVal;
       if ($scope.userType=== 'userType2')
        {
            $scope.myCheck = false;
        }
        else
        {
            $scope.myCheck = true;
        }

      }

您需要找到跟踪用户类型更改的方法，这仅用于在控制器加载时处理用户类型

$scope.userType = 'userType1';

if ($scope.userType=== 'userType2')
    {
        $scope.myCheck = false;
    }
    else
    {
        $scope.myCheck = true;
    }

因此，您需要添加$watch来监视用户类型的更改

    $scope.$watchCollection("userType ", function(newVal, oldVal){

      $scope.userType = newVal;
       if ($scope.userType=== 'userType2')
        {
            $scope.myCheck = false;
        }
        else
        {
            $scope.myCheck = true;
        }

      }

如果你没有使用jQuery，你为什么用它来标记你的问题？@斯特林阿切尔，它已经被删除了，元素不在那里，你怎么能引用它？<代码> MyChest<代码> > <代码> >代码> MyChuest……它的类型化答案是正确的，但是你应该以更角度的方式考虑事情。如果你在你的输入[收音机]中使用ng模型，你将不需要巨大的If..else If块。。。您可以在angular文档中看到一个实际示例：如果您没有使用jQuery，为什么要用它标记您的问题？@Sterling Archer它已被删除如果元素不在那里，您如何引用它？
myCheck
中的
$scope
需要是
myCheck
…它的typopengy答案是正确的，但是你应该考虑用更角度的方式做事。如果你在你的输入[收音机]中使用ng模型，你将不需要巨大的If..else If块。。。您可以在angular文档中看到一个实际示例：您能告诉我如何使用吗？我可以用与使用ng if相同的方式在脚本文件中使用ng show中的用户类型检查吗？@msm0204是的，几乎相同。在这段代码中，当我将ng if替换为ng show时，首先显示的是div（在userType1中，可以看到div的类型）但之后是divdisappeared@msm0204似乎你的应用程序需要一些时间才能加载，请尝试将
ng-clope
添加到你的
div
。你能告诉我如何使用吗？我可以用与使用ng-if相同的方式使用脚本文件中的用户类型检查吗？@msm0204是的，几乎相同。在这段代码中，当我用ng-sho替换ng-if时w第一次显示的div（在userType1中，可以看到div的类型）但之后是divdisappeared@msm0204似乎你的应用程序需要一些时间才能加载，请尝试将
ng-clope
添加到你的
div
。我无法在我的应用程序中使用此-$scope.userType='userType1'。因为我必须放置if-else块进行用户类型检查。因为我要在if-else块中设置我没有写入的其他条件为了简单起见，问题部分是我在Pengyy的解决方案中遇到的唯一问题-该问题在显示div的userType1中得到了解决，但现在我在userType2中遇到了问题，其中div不应显示。在userType2中，尽管我的检查为false，并且不管是ng show还是ng clope和ng-show被使用div被显示了一会儿然后消失了。它不应该为userType2I显示。我不能在我的应用程序中使用这个-$scope.userType='userType1'。因为我必须设置if-else块进行用户类型检查。因为我要在if-else块中设置我在问题部分没有写的其他条件为了简单起见，我在Pengyy的解决方案中遇到的唯一问题是——这个问题是通过whi中的userType1解决的