AngularJS ng-repeat скрыть элемент повторения, если это не объект - PullRequest
Новая
       308

AngularJS ng-repeat скрыть элемент повторения, если это не объект

1 голос
/ 07 апреля 2019

Вот мои данные 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-нг-повтор: 

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

то, что я хочу сделать, это когда msg не является объектом типа "id": 3, который не является объектом, поэтому я не хочу его повторять как ng-если msg не является объектом, то не включайте его в повторяющейся петле? я использовал ng-if = "typeof (msg)! == 'object'", но он скрывает все элементы. Пожалуйста, укажите мне, как я могу скрыть повторяющийся элемент, если это не объект

Ответы [ 2 ]

0 голосов
/ 07 апреля 2019

Преобразование каждого объекта в массив: 

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

Когда директива ng-repeat выполняет итерацию массивов, она использует только те свойства, которые анализируются как целые числа.

Для получения дополнительной информации см.

0 голосов
/ 07 апреля 2019

используйте 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>
...