简体   繁体   English

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

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

Please help a little bit.请帮助一点。 I have a list of 7 events displayed already with Angularjs.我已经使用 Angularjs 显示了 7 个事件的列表。 I'd like when I click on the <h2> (the event name) of some event, to open an ovelay that displays the same data from the database but only for this event which is clicked.我想当我点击某个事件的<h2> (事件名称)时,打开一个 ovelay,它显示来自数据库的相同数据,但只针对被点击的这个事件。 I'm sure that 'filter' will do the work but it seems I'm doing something wrong.我确信“过滤器”会完成这项工作,但似乎我做错了什么。 Here is my code.这是我的代码。 The ng-app and ng-controller are in the <main> tag. ng-app 和 ng-controller 位于<main>标签中。 Angularjs version: 1.7.9 Angularjs 版本:1.7.9

My Html:我的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>

My script:我的脚本:

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

this filter below is not working at all.下面的这个过滤器根本不起作用。 It continues to show all the events.它继续显示所有事件。

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;
            });
        }
    }

...and then by invoking singleEventOpen() the overlay appears, but it displays all the data, not just the clicked event ...然后通过调用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');
    }
});

The php file with the database extraction is working fine so I won't display it here.带有数据库提取的 php 文件工作正常,所以我不会在这里显示它。 What should I do to make the overlay display only the event which <h2> is clicked?我应该怎么做才能使叠加层仅显示<h2>被点击的事件?

Here is a pic of the list with events这是带有事件的列表的图片

Here is a pic of the overlay这是叠加层的图片

Thanx in advance.提前谢谢。

EDITED I got the value of each h2 click thanx to @georgeawg but now what?编辑我得到了每个h2点击 thanx 到 @georgeawg 的价值,但现在呢?

UPDATE Hey, thanx a lot @georgeawg .更新嘿,非常感谢@georgeawg。 After many attempts I finally did this:经过多次尝试,我终于做到了:

$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;
});

And it works well.它运作良好。

Change the ng-click to pass an argument to the singleEventOpen function:更改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>

Then use that argument:然后使用该参数:

$scope.singleEventOpen = function(singleEvent) {
    console.log("Fetching info for ", singleEvent.eventName);
    //...
    //Fetch and filter the data

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

Adding an argument is the key to knowing which <h2> element was clicked.添加参数是了解点击了哪个<h2>元素的关键。


Update更新

Don't use ng-repeat in the overlay, just display the single item:不要在叠加层中使用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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM