AngularJS ng-if到第二个DOM树级别不起作用

Question

我有ng-if两个级别的条件.如果第一个div中的第一个条件满足第二个div应该显示.同样,如果第二个ng-if满足第三个div应该显示.但我能够只看到第二个div.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div><input type="number" ng-model="temp"></div>
<div ng-if="temp>40">
  <input type="radio" ng-click="temp2=true">Yes
  <input type="radio" ng-click="temp2=false">No
</div>
<div ng-if="temp2">
  <p>Some content</p>
</div>

如果我使用,最后一个div显示ng-show.但我不能使用ng-show.还有一些div基于这些条件工作.请帮助我这方面

Answer 1

因为ng-if创造了新的范围.试试这个吧.

  <div><input type="number" ng-model="temp"></div>
   <div ng-if="temp>40">
      <input type="radio" ng-click="temp2=true">Yes
      <input type="radio" ng-click="temp2=false">No
       <div ng-if="temp2">
         <p>Some content</p>
      </div>
   </div>

编辑

最好使用controllerAs语法.

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  var vm = this;
  
  
  vm.setTemp2 = function(){
    vm.temp > 40 && vm.temp2 ?  vm.temp2= true : vm.temp2=false;
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl as vm">
  <div><input type="number" ng-model="vm.temp" ng-change="vm.setTemp2(vm.temp)" ></div>
  <div ng-if="vm.temp>40">
    <input type="radio" name="content" ng-click="vm.temp2=true">Yes
    <input type="radio" name="content" ng-click="vm.temp2=false">No
  </div>
  <div ng-if="vm.temp2">
    <p>Some content</p>
  </div>
</div>