Angular ng-show未在视图中显示元素

时间:2017-03-09 10:50:20

标签: angularjs ng-show

我正在尝试在我的代码中实现一个简单的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都保持隐藏状态。我在这个网站上寻找了一个解决方案并尝试了一些组合,认为我错过了一些细节,但我似乎可以使它工作。

1 个答案:

答案 0 :(得分:0)

当您使用Controller时,因为synstax vm是您可以引用范围内控制器的名称。

如果您的代码在不同的闭包中运行,例如从控制器构造函数运行,您可能需要以不同的方式引用它。

看起来这段代码是在Controller构造函数中调用的,所以&#34; vm&#34;在那里不会成为一个定义的变量。你应该使用&#34;这个&#34;代替:

IMessageActivity

如果你在js文件的顶部添加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); } } ,你应该得到一些警告。