ng-repeat忽略立即ng-if

时间:2017-01-10 06:11:30

标签: javascript angularjs ng-repeat

我一直在与Angular JS合作很长时间,但刚刚遇到一个奇怪的问题,ng-if只会被ng-repeat忽略。

这是不能按预期工作的示例和简单代码

<ul ng-repeat="detail in details">
  <span ng-if="2 == 3"> <!-- This should block the next tags to execute-->
    <li>{{detail.name}}
      <ul ng-repeat="detailed in details.name">
        <li>{{detailed.prof}}</li>
      </ul>
    </li>
  </span>
  <span ng-if="2 === 2"> <!-- Instead this should get print -->
    Print this (Updated)
  </span>
</ul>

这是我的傻瓜:https://plnkr.co/edit/xy4Qyd4tXm6kWROiaFVR?p=preview

3 个答案:

答案 0 :(得分:3)

使用此版本

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

或使用ng-if - &gt; ng-show

答案 1 :(得分:3)

您正在寻找的是:

 <div ng-show="'2' == '3'">
    <li>{{detail.name}}
       <ul ng-repeat="detailed in details.name">
         <li>{{detailed.prof}}</li>
        </ul>
     </li>
 </div>

而不是使用ng-if使用ng-show

答案 2 :(得分:1)

  

我已经更新你了吗?

请查看this

问题是版本问题。您也可以将其转换为数字(ng-if="+2 === +2"),请尝试此代码而不是您的代码

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
  <ul ng-repeat="detail in details">
    <span ng-if="+2 === +3">
      <li>{{detail.name}}
        <ul ng-repeat="detailed in details.name">
          <li>{{detailed.prof}}</li>
        </ul>
      </li>
    </span>
    <span ng-if="+2 === +2">
      Nothing printed
    </span>
  </ul>

  </body>

</html>