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

Question

我实际上是试图显示/隐藏基于用户类型的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 (userType === 'userType2')
    {
        $scope.myCheck = false;
    }
    else
    {
        $scope.myCheck = true;
    }

JS CODE BLOCK给了我错误

    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.我不是在使用JQuery.

UPDATE

我用Pengyy的解决方案得到的唯一问题 - 问题是用userType1解决的,其中div显示但现在我遇到了userType2的问题,其中div不应该显示.在userType2中,尽管myCheck是假的,并且无论是否使用ng-show或同时使用ng-cloak和ng-show,div都会显示片刻然后消失.它不应该显示为userType2

Answer 1

使用时ng-if,当表达式为false时,元素将从DOM中删除.文档在这里.

这将导致document.getElementById()什么都没有回来.考虑一下你的情况,你应该尝试一下ng-show.

<div class="rate animated rubberBand" ng-cloak ng-show="mycheck">
    ...
</div>