Javascript - 当我在AngularJS中使用ng-if时，为什么我收到此错误？

I am actually trying to show/hide a div based on user-type , suppose usertype1 will be able to see the div but usertype2 will not be able to view the div.

我实际上是试图根据用户类型显示/隐藏div，假设usertype1将能够看到div但是usertype2将无法查看div。

HTML CODE

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 CODE

JS代码

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

JS CODE BLOCK which is giving me the error

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;
    }

THE ERROR

错误

Cannot set property 'checked' of null

无法将属性'checked'设置为null

I just want to show the div for userType1 and hide for userType2. I am not using JQuery.

我只想显示userType1的div并隐藏userType2。我没有使用JQuery。

UPDATE

UPDATE

the only problem I am getting with Pengyy's solution - the problem is fixed with userType1 in which the div show but now I am facing problem with userType2 in which the div should not display. Here in userType2 inspite of myCheck being false and irrespective of whether ng-show or both ng-cloak and ng-show is used the div is displayed for few moments and then disappearing . It should not display at all for userType2

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

3 个解决方案

#1

With ng-if, the elements will be removed from DOM when the expression is false. documentation here.

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

This will cause document.getElementById() to get nothing back. Consider your situation, you should try ng-show instead.

这将导致document.getElementById（）得不到任何回报。考虑一下你的情况，你应该试试ng-show。

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

#2

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$log) {
$scope.userType = 'userType1';
$scope.mycheck = true;
$scope.change=function(){
if ($scope.userType == 'userType2')
    {
        $scope.mycheck = false;
    }
    else
    {
        $scope.mycheck = true;
    }
    //$log.info($scope.userType);
}

  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker">
<div ng-controller="MainCtrl" >
 <select ng-model="userType" ng-change="change()">
            <option value="userType1">userType1</option>
            <option value="userType2">userType2</option>
            </select>
<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>
           
            </div>
            </div>

#3

You need to way to track the userType changes, this is only for handling userType when controller load

您需要以跟踪userType更改的方式，这仅用于在控制器加载时处理userType

$scope.userType = 'userType1';

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

So you need to add $watch to watch the userType changes

所以你需要添加$ watch来观察userType的变化

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

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

      }

#1