We Keep Coding

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. 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.
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.
Angularjs version: 1.7.9
My 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
$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.
What should I do to make the overlay display only the event which <h2> is clicked?
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?
UPDATE
Hey, thanx a lot #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:
<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.
Update
Don't use ng-repeat in the overlay, just display the single item:
<!-- 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>

Vue.js get element's html value by clicking on it's neighboring element

Hello everyone I'm building a simple notes app and I can't figure out how to implement one feature.
I have a card element and delete button as a child of this element. I need to check if the card element child's(.card-title) html value(jQuery's .html()) is equal to the localStorage(I'm using for to loop through the localStorage object) key by clicking on Delete button(that is a child of the card element alongside with the card's title) .Then, if true, I need to delete the localStorage item by key that is equal to the .card-title's html value.
So basically I have
.card
.card-title (with html value I need to get)
.card-body (nothing to do with it)
.delete-button (by clicking on it I need to get .card-title's html value)
That's only my point of view, which, most likely, is wrong. So, maybe, there is a better approach for deleting notes in my app?
Any ideas?
Full code on CodePen
Thank you very much for spending your precious time with my issue! Thank you for any help!
So I have a code like this :
<div id="notes">
<div class="container">
<div class="form-group">
<label for="title">Enter title</label>
<input class="form-control" id="title"/>
</div>
<div class="form-group">
<label for="body">Enter body</label>
<textarea class="form-control" id="body"></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary" #click="add">Add</button>
<button class="btn btn-danger" #click="clear">Delete all</button>
</div>
<div class="card" v-for="o,t,b,c in notes">
<div class="card-body">
<h5 class="card-title">{{t}}</h5>
<p class="card-text">{{o[b]}}</p>
<a class="card-link" #click="remove">Delete</a>
</div>
</div>
</div>
</div>
new Vue({
el: "#notes",
data: {
notes: {}
},
methods: {
add: function() {
localStorage.setItem($("#title").val(), $("#body").val());
location.reload(true);
},
clear: function() {
localStorage.clear();
location.reload(true);
},
remove: function(e) {
for (i = 0; i < localStorage.length; i++) {
if (
localStorage.key(i) ==
$(this)
.closest(".card")
.find(".card-title")
.html()
) {
alert(true);
}
}
}
},
created: function() {
for (i = 0; i < localStorage.length; i++) {
this.notes[localStorage.key(i)] = [
localStorage.getItem(localStorage.key(i)),
"red"
];
}
}
});

so i built this very simple app so you can check it out
https://jsfiddle.net/vrxonsq1/2/
new Vue({
el:"#app",
data:{
form:{
title:"",
body:""
},
notes:[]
},
methods:{
add: function(){
this.notes.push({
title: this.form.title,
body: this.form.body
});
this.form.title = "";
this.form.body = "";
this.save();
},
remove: function(title){
this.notes.forEach(function(note,index){
if (note.title == title){
this.notes.splice(index,1);
}
})
this.save();
},
save: function(){
localStorage.setItem("notes", JSON.stringify(this.notes) );
}
},
created: function(){
notes = JSON.parse(localStorage.getItem("notes") );
this.notes = notes ? notes : []
}
})
it doesn't use jquery, only vuejs, I think it is better this way
simply create an array contains 'note' objects where each one have title and body.
Tell me if you have any questions.

with jQuery you can get an elements parent element with .parent().
So in this case you should be able to do this to get the html you're looking for:
$(this).parent().find('.card-title').html()

Well, found the solution myself, thanks everyone for help!
Updated code :
new Vue({
el: "#notes",
data: {
notes: {}
},
methods: {
add: function() {
localStorage.setItem($("#title").val(), $("#body").val());
location.reload(true);
},
clear: function() {
localStorage.clear();
location.reload(true);
},
remove: function(e) {
var t = $(e.target)
.parent()
.find(".card-title")
.html();
for (i = 0; i < localStorage.length; i++) {
if (localStorage.key(i) == t) {
localStorage.removeItem(localStorage.key(t));
location.reload(true);
}
}
}
},
created: function() {
for (i = 0; i < localStorage.length; i++) {
this.notes[localStorage.key(i)] = [
localStorage.getItem(localStorage.key(i)),
"red"
];
}
}
});

It may help to use VueJS' $refs
Assigning a ref to your elements gives you access to the specifically named DOM element within your component via a $refs property on this e.g
<div ref="myDiv">I'm a div</div> // = { myDiv: [DOMELEMENT] }
created () {
console.log(this.$refs.myDiv.innerHTML) // I'm a div
}
By using refs you should be able to use querySelector to query child elements of parent elements and vice versa.

Append script to ID using short code?

I have code like :
<div id="content">
<div id="widget1"></div>
<div id="widget89"></div>
<div id="widget78"></div>
..............
<div id="widget(anyIndex)"></div>
</div>
By adding content into widget (HTML/JS widget) I have :
<div id="content"
<div id="widget1">
<script type='text/javascript'>
jQuery("#widget1").selectme({
Numpost:4,
Stylepost:"papa",
});
</script>
</div>
<div id="widget89">
<script type='text/javascript'>
jQuery("#widget89").selectme({
Numpost:7,
Stylepost:"popo",
});
</script>
</div>
..............
<div id="widget(anyIndex)">.....</div>
</div>
It is so manual and time-consuming.
Now, I want use short code instead of repeating too much Javascript in each div like :
<div id="content"
<div id="widget1">[4][papa]</div>
<div id="widget89">[7][popo]</div>
..............
<div id="widget(anyIndex)">...</div>
</div>
JS :
<script>
(function (a) {
a.selectme = function (c, b) {
var d = this;
d.init = function () {
d.options = a.extend({}, a.selectme.defaultOptions, b);
...................something
};
d.init()
};
a.selectme.defaultOptions = {
Numpost:4,
Stylepost:"Enter your style",
};
a.fn.selectme = function (b) {
return this.each(function () {
(new a.selectme(this, b))
})
}
})(jQuery);
</script>
Notice :Widget(anyindex) is catch automatically. For example: widget89 is set current but I don't know the index of that widget (index = 89), just sure that I am inputting Javascript/Jquery code into it. When I add new widget I will have new index, for example : widget105 or also widget200 (anyindex)
How can I do that. Thanks for your help.

Here's a way using data attributes in markup and a simple each loop to initialize. Add data- attributes for the variables you need to specify in plugin.
<div id="widget89" data-numpost="7" data-style="popo">
alert( $('#widget89').data('numpost') );
To get index of widgets create a collection of them first to use to index against:
Using $.each to intialize the whole collection will give you the index of widget in collection ( I'm not clear what you need it for):
$('[id^=widget]').each(function(idx){
var $this=$(this), data=$this.data, INDEX=idx;
$this.selectme({
Numpost:data.numpost,
Stylepost:data.style
})
})

you can use a function
function setwidget(id,post,style)
{
jQuery("#"+id).selectme({
Numpost:post,
Stylepost:style
});
}
now call like
setwidget("widget1",4,"papa");
setwidget("widget89",7,"popo");

How to create dynamic content within syntaxhighlighter

I want to display a property name based on user input and display this inside of SyntaxHighlighter. Another post says this is supposed to be easy.
JS
$('#inputText').keyup(function () {
var outputValue = $('#codeTemplate').html();//Take the output of codeTemplate
$('#codeContent').html(outputValue);//Stick the contents of code template into codeContent
var finalOutputValue = $('#codeContent').html();//Take the content of codeContent and insert it into the sample label
$('.popover #sample').html(finalOutputValue);
SyntaxHighlighter.highlight();
});
SyntaxHighlighter.all();
Markup
<div style="display: none;">
<label class="propertyName"></label>
<label id="codeTemplate">
<label class="propertyName"></label>
//Not using Dynamic object and default Section (appSettings):
var actual = new Configuration().Get("Chained.Property.key");
//more code
</label>
<pre id="codeContent" class="brush: csharp;">
</pre>
</div>
<div id="popover-content" style="display: none">
<label id="sample">
</label>
</div>
This outputs plain text. As if SyntaxHighlighter never ran. I suspect that the issue has to do with the fact that <pre> doesn't exist after the page is rendered. However, updating
SyntaxHighlighter.config.tagName = "label";
along with pre to label did not work either.

There were many problems that had to be overcome to get this to function. I feel this is best explained with code:
JS
<script>
$(function () {
$('#Key').popover({
html: true,
trigger: 'focus',
position: 'top',
content: function () {
loadCodeData(true);
console.log('content updated');
var popover = $('#popover-content');
return popover.html();//inserts the data into .popover-content (a new div with matching class name for the id)
}
});
$('#Key').keyup(function () {
loadCodeData();
});
function loadCodeData(loadOriginal) {
var userData = $('#Key').val();
var codeTemplate = $('#codeTemplate').html();
var tokenizedValue = codeTemplate.toString().replace('$$propertyNameToken', userData);
$('#codeContent').html(tokenizedValue);
$('#codeContent').attr('class', 'brush: csharp');//!IMPORTANT: re-append the class so SyntaxHighlighter will process the div again
SyntaxHighlighter.highlight();
var syntaxHighlightedResult = $('#codeContent').html();//Take the content of codeContent and insert it into the div
var popover;
if(loadOriginal)
popover = $('#popover-content');//popover.content performs the update of the generated class for us so well we need to do is update the popover itself
else {
popover = $('.popover-content');//otherwise we have to update the dynamically generated popup ourselves.
}
popover.html(syntaxHighlightedResult);
}
SyntaxHighlighter.config.tagName = 'div';//override the default pre because pre gets converted to another tag on the client.
SyntaxHighlighter.all();
});
</script>
Markup
<div style="display: none;">
<label id="codeTemplate">
//Not using Dynamic object and default Section (appSettings):
var actual = new Configuration().Get("$$propertyNameToken");
//Using a type argument:
int actual = new Configuration().Get<int>("asdf");
//And then specifying a Section:
var actual = new Configuration("SectionName").Get("test");
//Using the Dynamic Object and default Section:
var actual = new Configuration().NumberOfRetries();
//Using a type argument:
int actual = new Configuration().NumberOfRetries<int>();
//And then specifying a Section:
var actual = new Configuration("SectionName").NumberOfRetries();
</label>
<div id="codeContent" class="brush: csharp;">
</div>
</div>
<div id="popover-content" style="display: none">
</div>

grouping divs with same attribute with javascript

I am trying to group the divs with the same attribute and put them into a container div. The divs are generated. The structure looks like this.
<div class="cleanse">A</div>
<div class="treat">B</div>
<div class="prime">C</div>
<br><br><br>
<div class="product"><img alt="red" src="http://aar.co/508-859-thickbox/therapy-ball-small-red.jpg" width="100px"></div>
<div class="product"><img alt="blue" src="http://www.valleyvet.com/swatches/11178_L_230_vvs.jpg" width="100px"></div>
<div class="product"><img alt="red" src="http://aar.co/508-859-thickbox/therapy-ball-small-red.jpg" width="100px"></div>
<div class="product"><img alt="yellow" src="http://debenhams.scene7.com/is/image/Debenhams/304028400423?$ProdLarge$" width="100px"></div>
<div class="product"><img alt="blue" src="http://www.valleyvet.com/swatches/11178_L_230_vvs.jpg" width="100px"></div>
And the script what I have so far which is not working is
$(function(){
$('.product').each(function(){
if ($(this).is('[red]')) {
$(this).appendTo($('.cleanse'));
} else {
if ($(this).is('[blue]')) {
$(this).appendTo($('.treat'));
} else {
if ($(this).is('[yellow]')) {
$(this).appendTo($('.prime'));
}
}
}
}
});

Use the has filter:
$(function() {
var $products = $('.product');
$products.filter(':has([alt=red])').appendTo('.cleanse');
$products.filter(':has([alt=blue])').appendTo('.treat');
$products.filter(':has([alt=yellow])').appendTo('.prime');
});
Here's the fiddle: http://jsfiddle.net/qxRY4/1/
If you're dealing with a larger dataset, you might want to use a loop instead. Here's how:
$(function() {
var $products = $('.product');
var map = {
red: 'cleanse',
blue: 'treat',
yellow: 'prime'
};
$.each(map, function (attr, className) {
$products.filter(':has([alt=' + attr + '])').appendTo('.' + className);
});
});
Here's the fiddle: http://jsfiddle.net/qxRY4/2/

try this:
$(function(){
var colorMap = {red: "cleanse", blue: "treat", yellow: "prime"};
$('.product > img').each(function(){
var el = $(this);
el.appendTo($('.' + colorMap[el.attr('alt')]));
});
});

http://jsfiddle.net/y9CS7/2/
$(function() {
var $prod = $('.product');
$prod.find('[alt="red"]').appendTo($('.cleanse'));
$prod.find('[alt="blue"]').appendTo($('.treat'));
$prod.find('[alt="yellow"]').appendTo($('.prime'));
});
This will move the parent <div>
$(function() {
var $prod = $('.product');
$prod.find('[alt="red"]').parent().appendTo($('.cleanse'));
$prod.find('[alt="blue"]').parent().appendTo($('.treat'));
$prod.find('[alt="yellow"]').parent().appendTo($('.prime'));
});

if you want to keep the iteration on .product, first you need to select the img tag, not only this, since this would be the div, not the image tag with the alt:
$(function(){
$('.product').each(function(){
if ($("img",this).is('[alt="red"]')) {
$(this).appendTo('.cleanse');
} else {
if ($("img",this).is('[alt="blue"]')) {
$(this).appendTo('.treat');
} else {
if ($("img",this).is('[alt="yellow"]')) {
$(this).appendTo('.prime');
}
}
}
}
});