Angular ng-show가 뷰에 요소를 표시하지 않습니다.

Question

간단한 Angular ng-show를 구현하려고하는데 코드가 작동하지 않습니다. 나는 아래 코드를 첨부하고있다.

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

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>

function initController(){ 
    checkSliderForDisplay(); 
} 

참고로 변경. 상태 매개 변수 대신에 변수를 사용하십시오. ui 라우터 기능을 사용할 수 없으므로

Answer 2

컨트롤러를 사용중인 경우 synstax vm은 ​​범위에서 컨트롤러를 참조 할 수있는 이름입니다.

코드가 컨트롤러 생성자와 같이 다른 클로저에서 실행되는 경우이를 다르게 참조해야 할 수 있습니다.

코드 조각이 Controller 생성자에서 호출되어 "vm"이 정의 된 변수가 아닌 것처럼 보입니다. 당신은 "이"대신 사용해야합니다 : 당신이 당신의 js 파일의 상단에 "use strict";을 추가하는 경우

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

당신은 몇 가지 경고를해야한다.