正确使用 ng-if 和 ng-repeat

Question

我对 AngularJS 有初步的了解，并且对 ng-if 和 ng-repeat 有几个（可能是愚蠢的）问题。

1. 如果我有一个看起来像这样的 ng-repeat：

对于所有没有标题的容器，ng-repeat 会生成这些容器而不显示它们吗？还是它们根本不存在？我问的原因是我试图用 ng-show 替换 ng-if，但它不会产生与“隐藏”没有标题的容器相同的结果。

1. 有没有办法编写一个 ng-if 来判断下一个容器是否没有标题，然后做一些事情。我尝试了类似ng-if="item.title=='' && $index+1" 的方法，但没有任何运气。

有什么建议吗？

我的数据如下所示：

"_sections": [{ 
     "_bootstrap_cells": 6,
        "_count": 2,
        "visible": true,
        "columns": [{
            "fields": [{
                "name": "type_of_account",
                "type": "field"
            }, {
                "name": "routing_transit_number",
                "type": "field"
            }]
        }, {
            "fields": [{
                "name": "type_of_payment",
                "type": "field"
            }, {
                "name": "check_digit",
                "type": "field"
            }]
        }],
        "caption": "Direct Deposit",
        "id": "b456b9d2137ac340177c36328144b0ef"
    }, {
        "_bootstrap_cells": 12,
        "_count": 1,
        "visible": true,
        "columns": [{
            "fields": [{
                "name": "account_number",
                "type": "field"
            }, {
                "name": "account_title",
                "type": "field"
            }, {
                "name": "financial_institution_name",
                "type": "field"
            }]
        }],
        "caption": "",
        "id": ""
    }
}]

第一部分有两列，每列的引导单元格值为 6，第二部分只有一列，引导单元格为 12。由于第二部分没有标题，我希望将其附加到第一部分，但保留两个部分的引导格式。

Answer 1

如果containers 是一个数组，则它没有title 属性。您需要检查每个项目的标题。

还要注意ng-if 不会隐藏内容，而是将其移除或不将其插入到 DOM 中。 ng-show 对应的是ng-hide。

angular.module('appModule', [])
  .controller('MyController', [function() {
    this.containers = [{
      aaa: 1,
      title: 'One'
    }, {
      aaa: 2,
      title: ''
    }, {
      aaa: 3,
      title: 'Three'
    }]

  }]);

angular.bootstrap(window.document, ['appModule'], {
  strictDi: true
});

<div ng-controller="MyController as myCtrl">

  <div ng-repeat="item in myCtrl.containers track by $index">
    <div ng-if="item.title!=''">{{$index}}. {{item.title}}</div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>