过滤ng-repeat中的数据以仅显示带有Angularjs的单击项

Question

请帮忙一点。我已经用Angularjs显示了7个事件的列表。我想单击某个事件的<h2>（事件名称）时，打开一个ovelay，该ovelay显示来自数据库的相同数据，但仅针对被单击的事件。我确定“过滤器”可以完成工作，但似乎我做错了什么。这是我的代码。 ng-app和ng-controller位于<main>标签中。Angularjs版本：1.7.9

我的Html：

<main ng-app="eventsApp" ng-controller="eventsCtrl">

    <!-- Overlay that holds and displays a single event -->
    <div>
        <div ng-repeat="x in singlePageEvent | filter:hasName(x.eventName)">
            <div>
                <img ng-src="{{x.eventImgSrc}}" alt="{{x.eventImgName}}"/>
                <h2 class="event-name">{{x.eventName}}</h2>
                <p>{{x.eventTime}}</p>
                <p>{{x.eventPlace}}</p>
            </div>
        </div>
    </div>

    <!-- A list with all the events -->
    <div ng-repeat="x in events">
        <div>
            <img ng-src="{{x.eventImgSrc}}" alt="{{x.eventImgName}}"/>
            <h2 ng-click="singleEventOpen()" class="event-name">{{x.eventName}}</h2>
            <p>{{x.eventTime}}</p>
            <p>{{x.eventPlace}}</p>
        </div>
    </div>

</main>

我的脚本：

let eventsApp = angular.module('eventsApp', []);

下面的此过滤器根本不起作用。它继续显示所有事件。

eventsApp.filter('hasName', function() {
    return function(events, evName) {
        var filtered = [];
        angular.forEach(events, function(ev) {
            if (ev.eventName && ev.eventName.indexOf(evName) >-1) {
                filtered.push(ev);
            }
        });
    return filtered;
    }
});

eventsApp.controller('eventsCtrl', function($scope, $http) {
    let x = window.matchMedia("(max-width: 450px)");
    let singleEvent = angular.element(document.querySelector('.single-event.overlay'));

    function responsiveEventImages(x) {
        if (x.matches) {
            $http.get('./includes/events_res.inc.php').then(function(response) {
                $scope.events = response.data.events_data;
            });
        } else {
            $http.get('./includes/events.inc.php').then(function(response) {
                $scope.events = response.data.events_data;
            });
        }
    }

...然后通过调用singleEventOpen()会出现叠加层，但它会显示所有数据，而不仅仅是单击的事件

    $scope.singleEventOpen = function() {       
        $http.get('./includes/single_event.inc.php').then(function(response) {
            $scope.singlePageEvent = response.data.events_data;
        });

        singleEvent.removeClass('single-event-close').addClass('single-event-open');
    }
});

具有数据库提取功能的php文件工作正常，因此在此不再显示。如何使覆盖图仅显示单击<h2>的事件？

Here is a pic of the list with events

Here is a pic of the overlay

预先感谢。

Answer 1

更改ng-click以将参数传递给singleEventOpen函数：

<div ng-repeat="x in events">
    <div>
        <img ng-src="{{x.eventImgSrc}}" alt="{{x.eventImgName}}"/>
        <h2 ng-click="singleEventOpen(x)" class="event-name">{{x.eventName}}</h2>
        <p>{{x.eventTime}}</p>
        <p>{{x.eventPlace}}</p>
    </div>
</div>

然后使用该参数：

$scope.singleEventOpen = function(singleEvent) {
    console.log("Fetching info for ", singleEvent.eventName);
    //...
}