尽管有假的ng-if表达式,但在ng-if内部进行ng-repeat

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

问题是它似乎ng-repeat正在执行和渲染,无论ng-if是真实还是虚假,并且当ng-if它是假的时候它没有删除ng-repeatDOM元素.

我不确定实现是否有问题,或者这些角度指令是否意味着不能像这样使用 - 或者是否有更好的方法来解决角度问题.

以下是片段,这里是一个工作的plunker:http://plnkr.co/edit/FZQ5CM8UFOepNIHHuTD4？p =preview

HTML:

  


    

      Type: {{thing.type}}
      

        
Food: {{content.stuff}}
      
    


    

      Type: {{thing.type}}
      

        
Guts: {{content.stuff}}
      
    


  

剧本:

(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);

预期产出:

类型:苹果

食物:苹果片

食物:果汁

类型:狗

胆量:骨头

胆量:肉

实际产量:

类型:苹果

食物:苹果片

食物:果汁

胆量:苹果片

胆汁:果汁

食物:骨头

食物:肉类

类型:狗

胆量:骨头

胆量:肉

tasseKATT.. 6

这是因为您的HTML无效.ul内部不允许使用该元素p.

如果你检查渲染的HTML,你会发现它ul已经被渲染出来了p(当然可能取决于浏览器的实现).

p例如div,替换,您将得到您期望的结果.

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

如果你想知道里面允许哪些元素,p你可以在这里找到一个好的答案.

这是因为您的HTML无效.ul内部不允许使用该元素p.

如果你检查渲染的HTML,你会发现它ul已经被渲染出来了p(当然可能取决于浏览器的实现).

p例如div,替换,您将得到您期望的结果.

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

如果你想知道里面允许哪些元素,p你可以在这里找到一个好的答案.