角NG-显示没有显示在视图

Question

我想实现一个简单的角度NG出现在我的代码的元素，但我似乎无法使它工作。我附上下面的代码。

HTML

<div ng-repeat="question in data.questions track by $index" ng-if="question.visible" class="slide"> 

    <md-radio-group ng-model="question.selectedAnswer" ng-if="vm.showSliderChecker"> 
    <md-radio-button ng-repeat="ans in question.answer track by $index" ng-value="ans._id" 
        ng-click="radioBtnClick({qId: question._id, ansId: ans._id})">{{::ans.description}} 
    </md-radio-button> 
    </md-radio-group> 




    <div class="wrapper" ng-show="vm.showSliderChecker"> 
<div class="toggle_radio"> 
<input type="radio" class="toggle_option" id="first_toggle" name="toggle_option" > 

<label for="first_toggle" class="widthEighth" ng-repeat="ans in question.answer track by $index" ng-value="ans._id" 
        ng-click="radioBtnClick({qId: question._id, ansId: ans._id}); showSliderClickedMessage()"><p> {{$index+1}} </p></label> 


    </div> 

</div> 

</div> 

角控制器 vm.checkSliderForDisplay = checkSliderForDisplay;

function initController(){ 
    checkSliderForDisplay(); 
} 

function checkSliderForDisplay() { 
    if($stateParams.testType === "Stress_management"){ 
     vm.showSliderChecker = true; 

     console.log("The value of slider checker is true and here's proof ----> "); 
     console.log(vm.showSliderChecker); 
     } 
     else{ 
     vm.showSliderChecker = false; 
     console.log("Alas, the slider checker is just a lot of false advertising and nothing more."); 
     console.log(vm.showSliderChecker); 
     } 
} 

initController(); 

现在，这里的问题：

控制台日志显示在控制台上，但两者的div留下隐患。我已经在这个网站上寻找解决方案，并尝试了一堆组合，因为我错过了一些细节，但我似乎可以使它工作。

Answer 1

使用<div ng-show="!vm.showSliderChecker">Some stuff that I wanna hide</div>隐藏DIV。

也改变

initController(){ 
    checkSliderForDisplay(); 
} 

到

function initController(){ 
    checkSliderForDisplay(); 
} 

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 
var vm = this; 
 
    
 
vm.testType = "Stress_management"; 
 
function initController(){ 
 
    checkSliderForDisplay(); 
 
} 
 

 
function checkSliderForDisplay() { 
 
    if(vm.testType === "Stress_management"){ 
 
     vm.showSliderChecker = true; 
 

 
     console.log("The value of slider checker is true and here's proof ----> "); 
 
     console.log(vm.showSliderChecker); 
 
     } 
 
     else{ 
 
     vm.showSliderChecker = false; 
 
     console.log("Alas, the slider checker is just a lot of false advertising and nothing more."); 
 
     console.log(vm.showSliderChecker); 
 
     } 
 
} 
 

 
initController(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl as vm"> 
 
<div ng-show="vm.showSliderChecker">Some stuff that I wanna show</div> 
 

 
<div ng-show="!vm.showSliderChecker">Some stuff that I wanna hide</div> 
 
</div>

请注意，我作出小小的例外。而不是状态PARAM我使用的变量，因为无法

Answer 2

当你正在使用的控制器synstax虚拟机是可以参考的控制器范围名称的UI路由器功能。

如果你的代码在不同的封闭运行，就像从控制器构造函数，你可能需要参考不同的看法。

貌似那一段代码在控制器构造函数被调用，以便“VM”不会在那里定义的变量。你应该用“这个”，而不是：

function checkSliderForDisplay() { 
    if(this.testType === "Stress_management"){ 
    this.showSliderChecker = true; 

    console.log("The value of slider checker is true and here's proof ----> "); 
    console.log(this.showSliderChecker); 
    } 
    else{ 
    this.showSliderChecker = false; 
    console.log("Alas, the slider checker is just a lot of false advertising and nothing more."); 
    console.log(this.showSliderChecker); 
    } 
} 

如果你在你的JS文件顶部添加"use strict";你应该得到一定的警示作用。