Question

我实际上是在尝试根据用户类型显示/隐藏div，假设usertype1将能够看到div但是usertype2将无法查看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，它给了我错误

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

错误

无法设置属性＆＃39;已检查＆＃39;为null

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

更新

我用Pengyy的解决方案遇到的唯一问题 - 问题是用userType1解决的，其中div显示但是现在我遇到了userType2的问题，其中div不应该显示。在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更改，这仅用于在控制器加载时处理userType

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

      }

Javascript - 为什么我在AngularJS中使用ng-if时出现此错误？

3 个答案: