javascript - ng-repeat 检测第一次出现的条件

Question

对于下面的代码，我想检测第一次出现这种情况 (msg.from_id==myid && msg.seen==1) 然后忽略其余项目，即使条件满足。

我尝试了 ($first && msg.from_id==myid && msg.seen==1) 但条件可能并不总是适用于第一个索引。

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

实际上我想要在这里实现的是显示第一个出现的已见消息的“已见”跨度(就像在 Viber 中一样)。

Answer 1

编辑:我的错，我更改了答案:

我创建这个例子是为了给你提供一个可能的解决方案；我将 ngShow 条件更改为 ngIf 并添加了一个新条件 !isDone。一旦呈现第一个元素，ngInit 会将 isDone 分配给 true 以防止呈现更多跨度

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>