Question

以下车把模板的等效angularjs模板是什么？有没有办法实现相同的结果而不用另一个标签包装if块？（foo是假的）

<ul>
    <li>a</li>
    {{if foo}}
    <li>b</li>
       … 
    <li>c</li>
    {{/if}}
    <li>d</li>
</ul>

渲染的模板应该是：

<ul>
    <li>a</li>
    <li>d</li>
</ul>

Answer 1

带有一次时间绑定的

ng-if（如果您使用的是版本1.3.x，则需要使用其他一些类似bindonce的库以避免任何不必要的监视）可能更适合您。但理想情况下，它显然不清楚，因为你可以通过多种方式解决这个问题。它甚至不必进入视图，您可以在设置用于重复ng-repeat）li s的视图模型时将其从控制器本身过滤掉。如果您尝试显示和隐藏它们，也可以使用ng-show。 ng-if和ng-show / ng-hide之间的区别在于ng-if从dom中完全删除元素（并且无法使用nganimate进行动画处理）。 ng-show只设置css属性display：none如果condition set为false。

<ul>
    <li>a</li>
    <li ng-if="::foo">b</li><!-- Using :: for one time binding V1.3.x so no more watchers -->
    <li ng-if="::foo">c</li>
    <li>d</li>
</ul>

更新基于OP正在寻找的评论＆＃34;一个块语句，用于显示/隐藏一堆元素，而无需添加容器标记＆＃34;。

Angular不仅仅是一个像把手一样的模板库。因此，在提供任何具体答案之前，首先要向learn how angular works推荐。它不仅仅是一个模板引擎，它将数据绑定到已经渲染的DOM，而视图更多地反映了从控制器构建的视图模型/模型。因此，在您的情况下，正如我之前解释的那样，您只需根据特定条件过滤掉数据。查看可与ng-repeat一起使用的ng-repeat，事件DOM filters。因此，在我看来，简而言之，寻找角度a block statement to show/hide a bunch of elements together without adding a container tag（正如你在车把中所做的那样）是错误的方向。对于您来说，一个可能的解决方案也可以是确定何时foo变为真，而不是事件提供要渲染到视图的那些项（要过滤掉）（或工作用例在视图中使用过滤器）。在你的情况下添加一个块语句只会导致一个无效的html，浏览器只会在angular甚至有机会处理之前将其剥离（不像handlerbars，你甚至在渲染之前将模板转换为html）。

在我看来，这是一种可行的，更好的方法（如果过滤是一次，如果只是一次在控制器中进行过滤，则使用视图过滤器是不好的）。

＆＃13;

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.items = [{
      name: 'a',
      hideWhenFoo: false
    }, {
      name: 'b',
      hideWhenFoo: false
    }, {
      name: 'c',
      hideWhenFoo: true
    }, {
      name: 'd',
      hideWhenFoo: true
    }, {
      name: 'e',
      hideWhenFoo: true
    }, {
      name: 'f',
      hideWhenFoo: false
    }, {
      name: 'g',
      hideWhenFoo: false
    }];
    $scope.foo = true; // due to some condition
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <ul>
    <li ng-repeat="item in items | filter:{hideWhenFoo:!foo}">{{item.name}}</li>
  </ul>
</div>

＆＃13;

Answer 2

以下作品类似于ng-repeat-start和ng-repeat-end。但是，我没有在文档中找到它。

<ul>
    <li>a</li>
    <li ng-if-start='foo'>b</li>
       … 
    <li ng-if-end>c</li>
    <li>d</li>
</ul>

在没有附加元素的情况下划分某些兄弟节点

2 个答案: