[英]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>
元素的关键。
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.