簡體   English   中英

Angular ng-show未在視圖中顯示元素

[英]Angular ng-show is not showing the element in the view

我正在嘗試在代碼中實現一個簡單的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都保持隱藏狀態。 我已經在該網站上尋找解決方案,並嘗試了一堆組合,以為我錯過了一些細節,但似乎可以使它工作。

使用控制器時由於synstax vm是名稱,您可以在范圍內引用控制器。

如果代碼在不同的閉包中運行,例如從控制器構造函數中運行,則可能需要以不同的方式引用它。

看起來該代碼段是在Controller構造函數中調用的,因此“ vm”在此處不會是已定義的變量。 您應該使用“ this”代替:

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

如果添加"use strict"; 在js文件的頂部,您應該得到一些警告。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM