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

Question

请帮忙一点。我已经用 Angularjs 显示了 7 个事件的列表。我想当我点击某个事件的 <h2> （事件名称）时，打开一个覆盖，显示来自数据库的相同数据，但仅针对被点击的事件。我确信 'filter' 会完成这项工作，但似乎我做错了什么。这是我的代码。 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(x)" 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 singleEventOverlay = angular.element(document.querySelector('div.single-event.overlay'));
    let singleEvent = singleEventOverlay;

    function responsiveEventImages(x) { //this displays the list with events
        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(singleEvent) {
        let clickedEvent = singleEvent.eventName; //I got the value of each h2 click thanx to @georgeawg but now what?
        console.log("Fetching info for ", singleEvent.eventName);

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

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

提前致谢。

已编辑 我得到了每个 h2 点击 @georgeawg 的价值，但现在呢？

更新嘿，非常感谢@georgeawg。经过多次尝试，我终于做到了：

$scope.singleEventOpen = function(singleEvent) {
    $http.get('./includes/single_event.inc.php').then(function(response) {
        let allEvents = response.data.events_data;
        for (var i = 0; i < allEvents.length; i++) {
            singleEvent = allEvents[i];
        }
    });
    console.log('Fetching data for', singleEvent);
    $scope.ex = singleEvent;
});

而且效果很好。

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);
    //...
    //Fetch and filter the data

    $scope.ex = "single item data";
}

添加参数是了解单击了哪个 <h2> 元素的关键。

更新

不要在叠加层中使用ng-repeat，只显示单个项目：

<!-- Overlay that holds and displays a single event -->
̶<̶d̶i̶v̶ ̶n̶g̶-̶r̶e̶p̶e̶a̶t̶=̶"̶x̶ ̶i̶n̶ ̶s̶i̶n̶g̶l̶e̶P̶a̶g̶e̶E̶v̶e̶n̶t̶ ̶|̶ ̶f̶i̶l̶t̶e̶r̶:̶h̶a̶s̶N̶a̶m̶e̶(̶x̶.̶e̶v̶e̶n̶t̶N̶a̶m̶e̶)̶"̶>̶
<div ng-if="ex"">
    <div>
        <img ng-src="{{ex.eventImgSrc}}" alt="{{ex.eventImgName}}"/>
        <h2 class="event-name">{{ex.eventName}}</h2>
        <p>{{ex.eventTime}}</p>
        <p>{{ex.eventPlace}}</p>
    </div>
</div>

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

Filter data in ng-repeat to display only the clicked item with Angularjs

javascript

filter

angularjs

angularjs-ng-repeat

更新