AngularJS循环显示相同的图像

Question

在我的项目中，我需要为每个元素显示它的形象。

这是我的html：

<div ng-repeat="event in events.events" class="event show-place" data-id="@{{ event.id }}"
 ng-mouseenter="selectEvent(event)">
<div class="cover-events">
    <img width="100%" height="100%"
         ng-src="@{{ selectedEvent.place.image | addFullPathToImage }}"
         alt="@{{ selectedEvent.place.name }}"
    >
    <div class="user-info">
        <a href="@{{ event.created_by.profileSlug }}">
            <immagine-profilo hashid="@{{ event.created_by.hashid }}"
                              username="@{{ event.created_by.profile.username }}"
                              photo="@{{ event.created_by.profile.photo }}"></immagine-profilo>
            <div class="user-event" ng-bind="event.created_by.profile.username"></div>
            <rating class="user-experience" stars="@{{ event.created_by.level }}"
                    icon="star"></rating>
        </a>
    </div>
</div>
<div class="info-event">
    <div vertilize class="content-info">
        <div class="title-place">
            <h2 ng-bind="event.place.name"></h2>
        </div>
        <div class="date-time">
            @{{ event.unix_date | formatDate }} | @{{ event.time_start }}
        </div>
        <div class="event-feature">
            <div class="category pull-left">
                <img ng-src="@{{ event.category.icon | addFullPathToIcon }}"
                     alt="@{{ event.category.name }}">
                <span ng-bind="event.category.name"></span>
            </div>
            <div class="difficulty pull-left">
                <rating class="difficulty-bar" stars="@{{ event.difficulty_level }}"
                        icon="circle"></rating>
                                <span>
                                    {{ trans('frontend/events/events.strings.difficulty') }}
                                </span>
            </div>
            <div class="participants pull-left">
                <div class="speech-bubble speech-bubble-bottom">
                    @{{ event.participants_count }}
                </div>
                <span>{{ trans('frontend/events/events.strings.participants') }}</span>
            </div>
        </div>
    </div>
    <a class="link-with-arrow"
       href="{{ localeRoute('events.event', [null, null])}}/@{{ event.slug }}/@{{ event.id }}">
        {{ trans('frontend/pages/place.sidebar.links.read_more') }}
    </a>
</div>

​

图像代码是：

<img width="100%" height="100%"
    ng-src="@{{ selectedEvent.place.image | addFullPathToImage }}"
    alt="@{{ selectedEvent.place.name }}">

这是过滤器：

app.filter('addFullPathToIcon', function () {
    return function (text) {
        return window.paths.categoriesPath + "/" + text;
    }
});

当我运行代码时，每个事件都会显示相同的图像，如果单击其中的一个，图像将发生变化，并显示每个事件的第二个图像。

有人能帮我看到错误吗？

Answer 1

在我看来，只有一个"selectedEvent"，它是在ng鼠标上定义的。也许你想

<img width="100%" height="100%"
    ng-src="@{{ event.place.image | addFullPathToImage }}"
    alt="@{{ event.place.name }}">

相反，在您的ng-重复，如果您不希望所有的图像改变与事件的选择.