Question

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

问题是ng-repeat正在执行和渲染，无论ng-if是真实还是虚假，而ng-if假的是它没有删除ng-repeat DOM元素。

我不确定实施是否有问题，或者这些角度指令是否意味着使用得相当 - 或者是否有更好的方法以角度解决这个问题。

以下是片段，这是一个有效的工具：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);

预期输出：

输入：apple

食物：苹果片
食物：果汁

类型：狗

胆量：骨头
胆量：肉

实际输出：

输入：apple

食物：苹果片
食物：果汁
胆量：苹果片
胆汁：果汁
食物：骨头
食物：肉类

类型：狗

胆量：骨头
胆量：肉

Answer 1

这是因为您的HTML无效。 public void exportTo(String fileName) { try ( FileOutputStream fos = new FileOutputStream(fileName); PrintWriter writer = new PrintWriter(fos); ) { for (Grade grade : mGrades) { System.out.printf("New grade" +grade); writer.printf("%s|%s%n",grade.getPupil(), grade.getGrade()); } } catch(IOException ioe) { System.out.printf("Problem saving %s %n", fileName); ioe.printStackTrace(); } } public void importFrom(String fileName) { try ( FileInputStream fis = new FileInputStream(fileName); BufferedReader reader = new BufferedReader(new InputStreamReader(fis)); ) { String line; while((line = reader.readLine()) != null) { String[] args = line.split("\\|"); addGrade(new Grade(args[0], args[1])); } } catch(IOException ioe) { System.out.printf("Problems loading %s %n", fileName); ioe.printStackTrace(); } }内不允许使用ul元素。

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

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

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

如果您想知道div内允许哪些元素，您可以找到一个好的答案here。

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

1 个答案: