[英]AngularJS ng-repeat hide repeat item if it is not an object
Here is my JSON data i am using in my repeat : 这是我重复使用的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": ""
}
}
}
my html ng-repeat : 我的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>
what i want to do is when msg is not an object like "id" : 3 which is not an object so i don't want it in the repeat like ng-if msg is not object then don't include it in the repeating loop? 我想做的是,当味精不是像“ id”这样的对象时:3这不是一个对象,所以我不希望它像ng-如果味精不是对象,那么就不要在重复中包含它环? i used ng-if="typeof(msg) !== 'object'" but it does hides all items. 我使用了ng-if =“ typeof(msg)!=='object'”,但它确实隐藏了所有项目。 Please point me out how can i hide repeat item if its not an object 请指出我如何隐藏重复的项目,如果它不是一个对象
Convert each object to an array: 将每个对象转换为数组:
this.messages = Object.assign([], this.messages);
this.messages.forEach(msg => {
msg = Object.assign([],msg));
});
When the ng-repeat
directive iterates arrays, it only uses the properties that parse as integers. ng-repeat
指令迭代数组时,仅使用解析为整数的属性。
For more information, see 有关更多信息,请参见
use ng-container
. 使用ng-container
。 You cannot use ng-repeat
and ng-if
on same element. 您不能在同一元素上使用ng-repeat
和ng-if
。 Also, typeof
is not a function it is an operator. 另外, typeof
不是函数,而是运算符。 Use ng-container
if you do not to stamp extra html
else you can additional div
and add your ng-if
condition on that element. 如果不标记额外的html
请使用ng-container
,否则可以添加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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.