I have a span tag like below which call a function in the controller when clicked.
HTML
<div class="row" ng-repeat="event in events">
<div class="col-lg-1 text-center">
<span class="glyphicon glyphicon-trash" data={{event.id}} ng-click="deleteEvent()">
</span>
</div>
</div>
Controller
$scope.deleteEvent=function(){
console.log(this);
}
I need to get the value in data attribute in the controller function. I tried using this keyword and $event; neither one worked.
Please help.
Even more simple, pass the $event object to ng-click to access the event properties. As an example:
<a ng-click="clickEvent($event)" class="exampleClass" id="exampleID" data="exampleData" href="">Click Me</a>
Within your clickEvent() = function(obj) {} function you can access the data value like this:
var dataValue = obj.target.attributes.data.value;
Which would return exampleData.
Here's a full jsFiddle.
Try passing it directly to the ng-click function:
<div class="col-lg-1 text-center">
<span class="glyphicon glyphicon-trash" data="{{event.id}}"
ng-click="deleteEvent(event.id)"></span>
</div>
Then it should be available in your handler:
$scope.deleteEvent=function(idPassedFromNgClick){
console.log(idPassedFromNgClick);
}
Here's an example
Addition to the answer of Brett DeWoody: (which is updated now)
var dataValue = obj.srcElement.attributes.data.nodeValue;
Works fine in IE(9+) and Chrome, but Firefox does not know the srcElement property.
I found:
var dataValue = obj.currentTarget.attributes.data.nodeValue;
Works in IE, Chrome and FF, I did not test Safari.
Related
Please see code below:
<div>
<div class="list-group">
<a class="list-group-item" ng-click="c.selectItem(note.sys_id)"
ng-repeat="note in data.notes">
<h4 class="list-group-item-heading">
{{note.title}}
</h4>
<p class="list-group-item-text">
{{note.sys_id}}
</p>
</a>
</div>
</div>
in the output I can see that note.sys_id is getting printed. However, I need to pass this to the ng-click function on top. I tried below code, but no result:
ng-click="c.selectItem(note.sys_id)"
ng-click="c.selectItem({{note.sys_id}})"
https://jsfiddle.net/1q8mdb3z/
ng-click="c.selectItem(note.sys_id)"
should work for you. Make sure your function is correct. I'd assume your scope is something to the effect
$scope.c = {
selectItem = function(id) {
// do something with id
}
}
I've been looking at this for days now and am totally stuck. The page I am working with looks like this:
<div class="field--item">
<span class="file file--mime-application-pdf file--application-pdf icon-before">
<div class="file-info text-center--mobile"><span class="file-icon"><span class="icon glyphicon glyphicon-file text-primary" aria-hidden="true"></span></span><div class="file-wrapper"><span class="file-name">17840.pdf</span><span class="file-size">94.35 KB</span></div></div>
<span class="file-link">Download
</span></span></div>
The custom variable that I set up looks like this:
function() {
return document.getElementsByClassName('resource-button')[0].getAttribute('resource-name').text();
}
What I really want to do is set up a variable that pulls in the resource name, when the Download button is clicked. I know to set up the actual click tracking etc. separately, I just can't get this function to pull through anything to the variable other than 'defined'.
Any help or a nod in the right direction would be sooo very much appreciated. Thanks!
Try removing the text() function at the end:
function getAttribute() {
return document.getElementsByClassName('resource-button')[0].getAttribute('resource-name');
}
console.log(getAttribute());
<div class="field--item">
<span class="file file--mime-application-pdf file--application-pdf icon-before">
<div class="file-info text-center--mobile"><span class="file-icon"><span class="icon glyphicon glyphicon-file text-primary" aria-hidden="true"></span></span><div class="file-wrapper"><span class="file-name">17840.pdf</span><span class="file-size">94.35 KB</span></div></div>
<span class="file-link">Download
</span></span></div>
perhaps you can use a click event:
Download
<script>
function myFunction(elem) {
var yourAttribute = elem.getAttribute('yourAttribute');
}
</script>
I have some javascript that I'm trying to convert into Angular:
$('.col-lg .fa-clock-o').click(function(e){
$(this).parent().toggleClass('set-time');
e.preventDefault()
});
I've tried adding the following to the child element containing the link, but it doesn't work, maybe theres a proper 'angular' way to do this instead?
A more 'Angular' way to do this would be to set a variable which represents whether or not the set-time class is present on the parent element. By default this would be undefined which is falsy.
Then to toggle it in your ng-click you can just set the value to be the opposite of what it currently is.
<div ng-class="{'set-time': setTimeClass}">
<a href class="fa fa-clock-o" aria-hidden="true" ng-click="setTimeClass = !setTimeClass">toggle class</a>
</div>
Here's a working example:
var app = angular.module('app', []);
.set-time {
background :red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-class="{'set-time': setTimeClass}">
<a href class="fa fa-clock-o" aria-hidden="true" ng-click="setTimeClass = !setTimeClass">toggle class</a>
</div>
</div>
The following works, but not sure its the angular way:
HTML:
Controller:
public toggleTimepickerPopup(event : any) : void{
jquery(event.target).parent().toggleClass('set-time');
event.preventDefault()
}
Parent is not a function, it's a prototype:
Correct usage is:
$(this).parent
And your anchor element:
I have some html wrapped in a template, however when I try to activate the template and change some of the elements within the template, it comes back as null. I have done a console.log on the template and all that comes back is the start of the template tag and end tag e.g. <template id="panel-template"></template> this is the rendered version, and as you can see none of the html that is supposed to be encapsulated within are not present.
Here is my template
<template id="panel-template">
<div class="panel panel-default" draggable="true">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
<span class="glyphicon glyphicon-pencil panel-icons"></span>
<span class="glyphicon glyphicon-zoom-in panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
</h3>
</div>
<div class="panel-body">
</div>
</div>
and here is part of the javascript that is related to the template, I have of course wrapped this in document.ready
if ('content' in document.createElement('template')) {
//var widgetCount = document.getElementById('columns').getAttribute('data-count');
var widgetModel = #Html.Raw(Json.Encode(Model.widgets));
for (var i = 0; i < widgetModel.length; i++) {
var clone = loadwidgets(widgetModel[i]); //This function is in an external js file
var inputDestination = document.querySelector('#col2')
console.log(inputDestination);
inputDestination.appendChild(clone);
}
}
and here is the loadWidgets function.
function loadwidgets (jsonObject) {
var template = document.querySelector('#panel-template');
var panelTitle = template.querySelector('div.panel-title');
var widgetType = template.querySelector('div.panel-body');
console.log(template);
//We give the widget a name on top of panel, this will be user defined.
panelTitle.textContent = jsonObject.WidgetName;
widgetType.setAttribute('id', jsonObject.WidgetCode);
return document.importNode(template, true);
}
I get an error saying panelTitle is null, but I think this is because when activating the template, it doest not seem to pull through the encapsulated html elements. I am unsure how to proceed.
I see in your Javascript part that you state that if you create an element. You need to start the code. But i don't see you craeting the element "template"
You should use querySelector() on the template's content property:
var panelTitle = template.content.querySelector('div.panel-title');
as explained in the link you provided.
Ok, so, I have a question.
I am getting the element ID like this.
<td id="ctl00_cphRoblox_lstItemsForResale_ctrl1_Td1" class="PriceBuyContainer">
document.getElementById("ctl00_cphRoblox_lstItemsForResale_ctrl1_Td1")
And this is below it.
<div class=" roblox-buy-now btn-primary btn-small PurchaseButton " data-item-id="168167114" data-item-name="Wanwood Visor" data-userasset-id="1941846042" data-product-id="20655974" data-expected-price="114" data-asset-type="Hat" data-expected-currency="1" data-expected-seller-id="6141596" data-bc-requirement="0" data-seller-name="laughableblox">
Buy Now
<span class="btn-text">Buy Now</span>
</div>
How would I get data-expected-price="NUMBERHERE" by using?
document.getElementById("ctl00_cphRoblox_lstItemsForResale_ctrl1_Td1")`
Use JQuery's .data() function. First you can grab the td element via jQuery:
var el = $("#ctl00_cphRoblox_lstItemsForResale_ctrl1_Td1");
Then find it's first child element and use use .data() to return the expected-price data attribute's value:
alert(el.find('> div').data('expected-price'));
jsFiddle