Question

这是我重复使用的JSON数据：

{
"2": {
    "id": 3,
    "0": {
        "avatar": "http:\\/\\/localhost\\/pottero\\/wp-content\\/plugins\\/dokan-live-chat\\/assets\\/images\\/avatar.png",
        "message": "Hello",
        "id": "2",
        "class": ""
    },
    "1": {
        "avatar": "http:\\/\\/localhost\\/pottero\\/wp-content\\/plugins\\/dokan-live-chat\\/assets\\/images\\/avatar.png",
        "message": "Hello Again",
        "id": "2",
        "class": ""
    }
  }
}

我的html ng-repeat：

<div ng-repeat="message in $ctrl.messages" class="chat-messages" data-user_id="{{message.id}}" id="chat-messages-{{message.id}}">
  <div ng-repeat="msg in message" class="message {{msg.class}}">
    <img ng-src="{{msg.avatar}}" />
      <div class="bubble">
        '<div ng-bind-html="msg.message | trusted_html"></div>
        <div class="corner"></div>
      </div>
  </div>
</div>

我想做的是，当味精不是“ id”之类的对象时：3不是味精，所以我不希望它像ng-if那样重复，如果味精不是对象，则不要包含它在重复循环中？我使用了ng-if =“ typeof（msg）！=='object'”，但它确实隐藏了所有项目。请指出我该如何隐藏重复项（如果它不是一个对象）

Answer 1

将每个对象转换为数组：

this.messages = Object.assign([], this.messages);
this.messages.forEach(msg => {
    msg = Object.assign([],msg));
});

ng-repeat指令迭代数组时，它仅使用解析为整数的属性。

有关更多信息，请参见

Answer 2

使用ng-container。您不能在同一元素上使用ng-repeat和ng-if。另外，typeof不是函数，而是运算符。如果您不加盖额外的ng-container，请使用html，否则您可以附加div并在该元素上添加ng-if条件。

<div ng-repeat="message in $ctrl.messages" class="chat-messages" data-user_id="{{message.id}}" id="chat-messages-{{message.id}}">
  <div ng-repeat="msg in message" class="message {{msg.class}}">
    <ng-container ng-if="typeof msg !== 'object'"> --> Or you can add here `div` or other html element
      <img ng-src="{{msg.avatar}}" />
        <div class="bubble">
          '<div ng-bind-html="msg.message | trusted_html"></div>
          <div class="corner"></div>
        </div>
    </ng-container>
  </div>
</div>

AngularJS ng-repeat如果不是对象，则隐藏重复项

2 个答案: