angularjs - ng-repeat inside ng-if rendering despite falsey ng-if 表达式

Question

我有一个 ng-repeat 迭代一个对象数组。每个对象都有一个 type 属性和一个 contents 数组。在 ng-repeat 中，我想根据对象的 type 显示不同的 contents 数组，所以我有条件地显示内容使用 ng-if。

问题是，无论 ng-if 是真还是假，ng-repeat 都在执行和渲染，而当 ng-如果 是假的，它不会删除 ng-repeat DOM 元素。

我不确定实现是否有问题，或者这些 Angular 指令是否不应该像这样使用 - 或者是否有更好的方法来解决 Angular 问题。

下面是片段，这里是一个有效的插件:http://plnkr.co/edit/FZQ5CM8UFOepNIHHuTD4?p=preview

HTML:

<div ng-controller="FunkyCtrl as vm">
  <div ng-repeat="thing in vm.twoThings">

    <p ng-if="thing.type === 'apple'">
      <span>Type: {{thing.type}}</span>
      <ul>
        <li ng-repeat="content in thing.contents">Food: {{content.stuff}}</li>
      </ul>
    </p>

    <p ng-if="thing.type === 'dog'">
      <span>Type: {{thing.type}}</span>
      <ul>
        <li ng-repeat="content in thing.contents">Guts: {{content.stuff}}</li>
      </ul>
    </p>

  </div>
</div>

脚本:

(function(angular) {
  angular.module('funkyStuff', []);
  angular.module('funkyStuff').controller('FunkyCtrl', FunkyCtrl);

  function FunkyCtrl() {
    var vm = this;
    vm.twoThings = [
      {
        type: 'apple',
        contents: [
          {
            stuff: 'apple slices'
          },
          {
            stuff: 'juice'
          }
        ],
      },
      {
        type: 'dog',
        contents: [
          {
            stuff: 'bones'
          },
          {
            stuff: 'meat'
          }
        ]
      }
    ];
  }
})(angular);

预期输出:

类型:苹果

• 食物:苹果片
• 食物:果汁

类型:狗

• 胆量:骨头
• 内脏:肉

实际输出:

类型:苹果

• 食物:苹果片

• 食物:果汁

• 内脏:苹果片

• 内脏:果汁

• 食物:骨头

• 食物:肉类

类型:狗

• 胆量:骨头
• 内脏:肉

Answer 1

这是因为您的 HTML 无效。 ul 元素不允许在 p 中使用。

如果您检查呈现的 HTML，您会注意到 ul 已在 p 之外呈现(当然这可能取决于浏览器的实现)。

将 p 替换为 div ，您将获得预期的结果。

演示: http://plnkr.co/edit/pBVZ4jIJ5qzRsa8xZbud?p=preview

如果你想知道 p 中允许哪些元素，你可以找到一个很好的答案 here .