CODEWITHSUNDEEP
javascriptangularjshtml
msm0204
msm0204

Reputation: 55

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

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

Upvotes: 0

Views: 140

Answers (3)

Pengyy
Pengyy

Reputation: 38191

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>

Upvotes: 5

Dushyantha
Dushyantha

Reputation: 217

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

      }

Upvotes: 0

RonyLoud
RonyLoud

Reputation: 2436

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>

Upvotes: 0

Related Questions