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

我有两种情况。如果第一个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>

如果使用ng-if，则显示最后一个div。但我不能使用ng-show。还有更多的div基于这些条件工作。请在这方面帮助我

最佳答案

因为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>

关于angularjs - AngularJS ng-if到第二个DOM树级别不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45385676/