角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";你應該得到一定的警示作用。