How do I get Child HTML elements attribute values using AngularJS - javascript

I have the html below:
<div class="div1">
<span class="span1" content="Apple">
</span>
<span class="span2" content="Orange">
</span>
</div>
<div class="div2">
<span class="span1" content="Mazda">
</span>
<span class="span2" content="Nissan">
</span>
</div>
I need to pull out the value of attribute "content" which is "Mazda" from div2 -> span1.
Using JQuery, I'd do it this way:
$(".div2 .span1").attr("content");
How do I achieve the same using AngularJS?

Getting the value of the element using jQuery or vanilla javascript, for instance document.getElementById, kind of defeats the whole purpose of AngularJs and similar frameworks.
Using the databinding and looping capabilites of AngularJS 1.x your html could look something like this:
<div class="div1">
<span class="span1" ng-repeat="fruit in fruits">
{{fruit}}
</span>
</div>
<div class="div2">
<span class="span1" ng-repeat="car in cars">
{{car}}
</span>
</div>
There's a great thread here if you want to dive in: "Thinking in AngularJS" if I have a jQuery background?

Related

How to get only child elements outside a certain class jquery

This is the scenario. The black element has an ID and theoretically I want to select like this:
$("#someid .class2")...
I don't want to get the element inside the red element though. And yes, the classes are written correctly, the red element and black have the same class...
Also, there may be elements between any of these elements (like in nested - the green element inside the red one might be nested inside multiple other elements, so the red one is not necessarily the parent)
So basically ignore all class1 elements other than itself.
How can I get this?
Edit: I added 2 examples. The query, whatever it is, should work for both.
Example 1
<div id="someid" class="class1">
<div class="class1">
<div>
<span class="class2"></span> <---- NO
</div>
</div>
<div>
<span class="class2"></span> <-----YES
</div>
</div>
Example 2
<div id="someid" class="class1">
<div>
<div>
<div class="class1">
<div>
<span class="class2"></span> <---NO
</div>
</div>
<span class="class2"></span> <-------YES
</div>
</div>
<div class="class1">
<span class="class2"></span> <--------NO
</div>
<span class="class2"></span> <-----------YES
</div>
console.log(document.querySelectorAll("#test1 > .class2"))
<div id="test1" class="class1">
<div class="class1">
<div class="class2">test 3</div>
</div>
<div class="class2">test 1</div>
</div>
In this example im using vanilla javascript but with jQuery the css selector it would be the same.

Is it possible to read html page content and grab a <div> with specific class?

I am using Nodejs application to read a large web page. The content of this web page are read using REST api call. Once I get the content I am only interested in specific div and everything under that .
I am wondering if there are any nodejs libraries and inbuilt javascript capabilities I can use to make this process seamless.
DOM tree looks like as follows and, I would like to read href Display me. where outermost / parent DIV is with class="three-equal".
<div class="three-equal" data-layout="three-equal">
<div class="cell normal" data-type="normal">
<div class="innerCell">
<p>
<span </span>
</p>
<div class="panel" ">
<div </div>
<div class="panelContent " style="background-color: #ffffff; ">
</div>
</div>
<p>
<span </span>
</p>
<div class="panel " </div>
<div class="panelContent " style="background-color: #ffffff; ">
<p>
<em>
Display me
</em>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I would use this DOM traversal / manipulation library.
https://github.com/defunctzombie/dom
Read about it's usage here: https://github.com/defunctzombie/dom/wiki

How to detect "class" from clicked "div", having several items with same class name?

I have a scenario somewhat like this,
<div>
<div class="check">
<p class="user-name">
<a href=url>name</a>
</p>
<i class="user-icon"></i>
<div class="activity">
<p class="status">Status</p>
<p class="stream">Stream</p>
</div>
</div>
<div class="check">
<p class="user-name">
<a href=url>name</a>
</p>
<i class="user-icon"></i>
<div class="activity">
<p class="status">Status</p>
<p class="stream">Stream</p>
</div>
</div>
</div>
and, I'm to .slideToggle() the div with classname activity of that particular div whenever user clicks upon any element inside div with classname check.
I've came up with this one,
$(document).ready(function(){
$(".check").click(function(){
$(".activity").slideToggle();
});
});
And, as it's seen, its should not work, as it acts upon all the divs with classname activity.
And I can't change the classnames into ids, as these are auto populated through another function, and easier for styling through css and maintenance.
I want it to act upon only that div on which user will click.
How can I do so?
Thanks :)
Just select it properly, and make sure you use .activity instead of .user-activity (which doesn't exist):
$(".activity", this).slideToggle();
or
$(this).find(".activity").slideToggle();
See it in action here:
$(document).ready(function(){
$(".check").click(function(){
$(".activity", this).slideToggle();
});
});
.check .activity {display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="check">
<p class="user-name">
<a>name</a>
</p>
<i class="user-icon"></i>
<div class="activity">
<p class="status">Status</p>
<p class="stream">Stream</p>
</div>
</div>
<div class="check">
<p class="user-name">
<a>name</a>
</p>
<i class="user-icon"></i>
<div class="activity">
<p class="status">Status</p>
<p class="stream">Stream</p>
</div>
</div>
</div>
The event handler will be called in the context of the element upon which it was fired, so just use this to access it.
You can combine that with jQuery's find method to look for the associated descendant element.
You can use find selector to find activity element in currently clicked div:
$(".check").click(function(){
$(this).find('.activity').slideToggle();
});
You may also use this Demo:
$(document).ready(function(){
$(".check").click(function(){
$(this).children('.activity').slideToggle();
//OR you may also use $(this).find('.activity').slideToggle();
});
});

AngularJS: How to display html data in view?

I am implementing a control to display a list of comments, with AngularJS + Bootstrap.
It's something like this:
<div class="comments">
<div ng-repeat="(id, comment) in person.comments" class="row">
<div class="form-group">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon vertical-align-top">
<div><i>Date:</i> {{ comment.date }}</div>
<div><i>By:</i> {{ comment.author }}</div>
</span>
<div class="form-control form-control-content">
{{ comment.content }}
</div>
</div>
</div>
</div>
</div>
</div>
Everything's o.k..
The problem is: comment.content is HTML data (for example it contains line-breaks, hyperlinks, style-formatting, ...). By default HTML is rendered as plain text.
The question is: how do I display data as HTML inside a div?
You can use ng-bind-html.
<div class="form-control form-control-content" ng-bind-html="comment.content"></div>
If you want {{comment.content}} to be interpreted as HTML, you need to look at ngBindHtml directive.
So you'd need to modify it:
<div ng-bind-html="comment.content" class="form-control form-control-content"></div>
You'll have to add $sanitize into your project dependencies, as is noted in the ngBindHtml doc link above.

Opinion on best way to create the elements

Hey guys I need your advice and ideas on this. I have a menu that looks sort of like this
<span class="options">Option 1</span>
<div class="more">More</div>
<span class="options">Option 1</span>
<div class="more">More</div>
<span class="options">Option 1</span>
<div class="more">
<div id="slider" class="slider">
<div id="knob" class="knob"></div>
</div>
</div>
<span class="options">Option 1</span>
<div class="more">More</div>
<span class="options">Option 1</span>
<div class="more">More</div>
The .more is hidden and when the user clicks any of the .options spans it will place the HTML into a "popup" I made. Here is quick JS I did
$(function() {
$('.options').click(function() {
var theHTML = $(this).next('.more').html();
$('.popup').html(theHTML);
});
And well this isn't the way I want since when I add more detail to it (the .more doesn't say more in them) such as the MooTools Drag/Slider it doesn't work because I am duplicating the html. I also tried APPEND and after I APPEND it the whole thing goes array... Any ideas on what I should do? If you need a better example please let me know...
It did not work because you appended new HTML after whole Jquery plugins have done loaded and attached. You should have to rebind/reattach the plugin that you want.

Categories