Ng-repeat detects the first occurrence of a condition
for the codes below, I want to detect the first occurrence of this condition (msg.from_id == myid && msg.seen == 1) and then ignore the rest of the items even if the condition is met.
I tried ($ first && msg.from_id == myid && msg.seen == 1), but the condition may not always apply in the first index.
<table class="table table-striped table-hover">
<tr ng-repeat="msg in messages" >
<td ng-class="{'orange': msg.from_id!=myid}" >
<span class="seen" ng-show="msg.from_id==myid && msg.seen==1">
<i class="icon icon-ok border0 font12 green"></i> seen
</span>
<b>{{msg.username}}</span> :</b>
<span ng-bind-html-unsafe="msg.message"></span>
</td>
</tr>
</table>
Actually what I want to achieve is to show the "visible" range for the first message seen (just like in Viber).
source to share
EDIT : my mistake, I changed the answer:
I created this example to provide you with a possible solution; I changed the condition ngShow
to ngIf
and added a new condition !isDone
. Once the first item is rendered, ngInit
assign isDone
to true
, preventing further intervals from being rendered
var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
$scope.messages = [{
from_id: 'test',
seen: 1,
username: 'username',
message: 'message1'
}, {
from_id: 'test',
seen: 0,
username: 'username2',
message: 'message2'
}, {
from_id: 'test2',
seen: 1,
username: 'username3',
message: 'message3'
}, {
from_id: 'test2',
seen: 1,
username: 'username3',
message: 'message3'
}
];
$scope.myid = "test";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app" ng-controller="ctrl" class="table table-striped table-hover">
<tr ng-repeat="msg in messages">
<td ng-class="{'orange': msg.from_id!=myid}"> <span class="seen" ng-if="msg.from_id==myid && msg.seen==1 && !isDone">
<i ng-init="isDone=true" class="icon icon-ok border0 font12 green"></i> seen
</span> <b>{{msg.username}} :</b>
<span ng-bind="msg.message"></span>
</td>
</tr>
</table>
source to share