在 ng-repeat 中过滤数据以使用 Angularjs 仅显示单击的项目

Question

请帮助一点。 我已经使用 Angularjs 显示了 7 个事件的列表。 我想当我点击某个事件的<h2> （事件名称）时，打开一个 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(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>被点击的事件？

这是带有事件的列表的图片

这是叠加层的图片

提前谢谢。

编辑我得到了每个h2点击 thanx 到 @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>