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代碼塊，這給了我錯誤

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

錯誤

無法將屬性“選中”設置為null

我只想顯示userType1的div並隱藏userType2的。 我沒有使用JQuery。

更新

Pengyy解決方案唯一遇到的問題-該問題已通過顯示div的userType1修復，但是現在我遇到了其中不應顯示div的userType2的問題。 在這里，盡管myCheck為false，並且無論是否使用ng-show或ng-cloak和ng-show都在userType2中使用，但div會顯示片刻，然后消失。 對於userType2，它根本不應該顯示

Answer 1

使用ng-if ，當表達式為false時，元素將從DOM中刪除。 文檔在這里 。

這將導致document.getElementById()一無所獲。 考慮到您的情況，您應該嘗試ng-show 。

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

Answer 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> 

Answer 3

您需要跟蹤用戶類型更改的方法，這僅用於在控制器加載時處理用戶類型

$scope.userType = 'userType1';

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

因此，您需要添加$ watch來監視userType更改

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

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

      }