Question

我对AngularJS有基本的了解，并且有一些关于ng-if和ng-repeat的问题（可能是愚蠢的）。

如果我的ng-repeat看起来像这样：

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

有没有办法对ng进行编码 - 如果说下一个容器没有标题，那就做点什么吧。我试过像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>

正确使用ng-if和ng-repeat

1 个答案: