Javascript - Why I am getting this error when I am using ng-if in AngularJS?

Question

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.

HTML CODE

<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

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

JS CODE BLOCK which is giving me the error

    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

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

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

If you're not using jQuery, why did you tag your question with it? — Sterling Archer
– Sterling Archer, Commented Apr 18, 2017 at 2:26
Pengyy answer is right, but you should consider do things in a more angular way. If you use ng-model in your input[radio], you wont need the gigantic if..else if block... you can see a practical example in angular documentation: docs.angularjs.org/api/ng/input/input%5Bradio%5D — Xavero
– Xavero, Commented Apr 18, 2017 at 2:37

Pengyy · Accepted Answer · 2017-04-18 03:39:51Z

5

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

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

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

edited Apr 18, 2017 at 3:39

answered Apr 18, 2017 at 2:26

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

msm0204 Over a year ago

can you please tell how ?

msm0204 Over a year ago

can I use the userType checking in the script file with ng-show in the same way as I am doing with ng-if?

Pengyy Over a year ago

@msm0204 yes, almost the same way.

msm0204 Over a year ago

in this code when i replaced ng-if with ng-show the div first got displayed ( in userType1 which is the type that will be able to see the div) but then the div disappeared

Pengyy Over a year ago

@msm0204 seems your app will take sometime to load, try adding ng-cloak to your div.

|

RonyLoud · Accepted Answer · 2017-04-18 02:54:13Z

0

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>

edited Apr 18, 2017 at 2:54

answered Apr 18, 2017 at 2:48

RonyLoud

2,4362 gold badges23 silver badges27 bronze badges

2 Comments

msm0204 Over a year ago

I cannot use this - $scope.userType = 'userType1'; in my app. Because I must have to put if-else block for usertype check . Because I am to set other conditions in the if -else block which I have not written in the question section for the sake of simplicity

msm0204 Over a year ago

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

Dushyantha · Accepted Answer · 2017-04-18 03:18:42Z

0

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

$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

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

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

      }

answered Apr 18, 2017 at 3:18

Dushyantha

2172 silver badges15 bronze badges

Collectives™ on Stack Overflow

Javascript - Why I am getting this error when I am using ng-if in AngularJS?

3 Answers 3

15 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

15 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related