I am trying to find some text inside an element using a css selector. If not CSS selector, please help me with the method to do so. I am struggling and this is for a client project I need to deliver in a day.
<div class="order-detail-item OrderDoneIDtxt">
<h5>Order ID</h5>
<p>IFQ43518</p>
</div>
I want to fetch this Order ID under 'P' tag as a label in GTM. Please help.
Creating a Custom JavaScript variable like this should do the trick:
function() {
return document.querySelector('.order-detail-item.OrderDoneIDtxt > p').innerText;
}
Related
I need to edit the css of some images in a class, but I'm doing it in a function, I've already done something similar but it directly edits a class, I need to know if I can do the same but edit only the img element of it.
Someone has had a similar issue here. I believe the solution is to use nested classes:
<div class="myParentClass">
<img class="myNestedClass" src="./myPicture"/>
</div>
Then just edit the class as you would normally. If you want to add css to it, you can just use:
.myParentClass .myNestedClass {
property: value;
}
I have this element on my html page:
<div class="section-title" id="bladeSectionTitle"
ng-transclude="title">
</div>
I want to get the value displayed.
I have tried the following in my typescript page & only get null:
var title = document.getElementById("bladeSectionTitle").getAttribute('section-title');
The view source gives me this:
<dpn-blade-section is-checkbox-visible="true" is-checked="$component.showAll">
<section-title>
<h4>Show All</h4>
</section-title>
In this instance, the value I would be looking for is 'Show All'.
Which version of angular are you running? We really need more information here. Although accessing the DOM directly isn't the way to go with angular, you're looking at something like this
var title = document.querySelector('dpn-blade-section section-title h4').innerHTML;
I'm using ngtagsinput (http://mbenford.github.io/ngTagsInput/) to add highlight functionality to my app. I can't figure out how dynamically add an id for each tag as its being created. I will be using this id to edit the styling of each tag item after it has been created. I saw the demo about custom templates, but this only works if you pre-define the array of tags. I'm a newb to Angular which is probably the issue... Any hints?
You can add the id using an on-tag-added handler. I made a very simple logic that appends the number of tags as id, but you can do whatever you want.
$scope.onTagAdded = function($tag) {
var index = $scope.tags.indexOf($tag);
$scope.tags[index].id = $scope.tags.length;
};
And in the HTML:
<tags-input ng-model="tags" on-tag-added="onTagAdded($tag)"></tags-input>
You can then use the appended id in your custom template if needed. See this Plunker.
When I am going to bind data in angularjs variable like..
$scope.msg = '<div class="success_msg">Message</div>';
<span ng-bind="msg"></span>
but its show with div tab also. I dont want to show html elements. I want to show only Message in this span.
What is the solution?
When you need to bind html fragments, you have to use mg-bind-html.
You can find the documentation here: https://code.angularjs.org/1.2.16/docs/api/ng/directive/ngBindHtml
(don't forget to add ngSanitize to your module dependencies)
I know this is bad design but would like to introduce angular to a current project. I would like sayHello to be able to determine whether the element has the class 'is-a-favorite'
<div ng-click="sayHello(29, $event)" class="is-a-favorite" data-type="location" data-global-id="29" data-make-disappear="false"> </div>
$scope.sayHello=function(global_id,event){
//var selector=???
if(selector.hasClass('is-a-favorite')){
console.log("this is-a-favorite");
}
};
How would (or could) I get a reference to current DOM element to query via hasClass?
thx
The clicked element is available as $event.target, so you could check $($event.target).attr('class') or something similar.
EDIT: actually, what you'd want is to check $($event.target).hasClass('is-a-favorite')