Javascript - 爲什麼我在使用ng時遇到此錯誤 - 如果在AngularJS中？

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

的錯誤

無法設置屬性空的「檢查」

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

UPDATE

我與Pengyy的解決方案獲得了唯一的問題 - 這個問題是固定的userType1其中DIV節目，但與userType2我現在面臨的問題，其中股利應不顯示。在userType2中，儘管myCheck是假的，無論是使用ng-show還是使用ng-cloak和ng-show，div都會顯示一會兒然後消失。它根本不應該顯示userType2

Answer 1

隨着ng-if，當表達式爲false時，元素將從DOM中刪除。 文檔here。

這將導致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

你需要的方式來跟蹤用戶類型的變化，這只是處理USERTYPE當控制器負載

$scope.userType = 'userType1'; 

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

所以你需要添加$手錶觀看用戶類型變化

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

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

     }