Фильтруйте данные в ng-repeat, чтобы отображать только выбранный элемент с Angularjs - PullRequest
Новая
       28

Фильтруйте данные в ng-repeat, чтобы отображать только выбранный элемент с Angularjs

0 голосов
/ 15 марта 2020

Пожалуйста, помогите немного. У меня есть список из 7 событий, отображаемых уже с Angularjs. Мне бы хотелось, чтобы при нажатии на <h2> (название события) какого-либо события открывался оверлей, отображающий те же данные из базы данных, но только для этого события, по которому щелкают. Я уверен, что «фильтр» сделает эту работу, но, похоже, я делаю что-то не так. Вот мой код 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> щелкнули?

Вот список пи c списка событий

Вот пи c наложения

Заранее спасибо.

EDITED Я получил значение каждого 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;
});

И это хорошо работает.

1 Ответ

0 голосов
/ 15 марта 2020

Измените 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>
...