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

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 以避免任何不必要的监视）可能更适合您。但理想情况下，它显然不清楚，因为你可以用 angular 中的许多方法解决这个问题。它甚至不必到达视图，您可以在设置用于重复 (ng-repeat) lis 的视图模型时从控制器本身过滤掉它。如果您要显示和隐藏它们，也可以使用 ng-show。 ng-if 和 ng-show/ng-hide 之间的区别在于 ng-if 从 dom 中完全删除了元素（并且它不能使用 nganimate 进行动画处理）。如果条件集为假，ng-show 仅设置 css 属性 display:none。

<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 正在寻找 "a block statement to show/hide a bunch of elements together without adding a container tag" 的评论。

Angular 不仅仅是像车把这样的模板库。因此，在提供任何具体答案之前，首先要向 learn how angular works. It is much more than a templating engine, it binds data to DOM that is already rendered and view is more of a reflection of the view model/model built from the controller. So in your case, as i explained earlier you just have to filter out the data based on a specific condition. Take a look at ng-repeat, event DOM filters 推荐可以与 ng-repeat 一起使用的方法。因此，简而言之，在 angular 中寻找 a block statement to show/hide a bunch of elements together without adding a container tag（就像您在车把中所做的那样）在我看来是在错误的方向思考。一个可能的解决方案也可以是确定 foo 何时变为真，不要提供这些项目（要过滤掉）以呈现给视图（或工作案例在视图中使用过滤器）。添加块语句只会导致 html 在您的情况下无效，浏览器甚至会在 angular 有机会处理它之前将其删除（与将模板转换为 [= 的处理程序栏不同） 43=]甚至在渲染之前）。

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

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

<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>

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>

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

Delimiting some sibling nodes without additional element

templates

handlebars.js

angularjs