It may be click photo and not add class inside the ng-repeat using AngularJS
<div class="resultitem" ng-repeat="a in vm.gettrustalbum">
<div class="result">
</div>
</div>
Add class demo inside the ng-repeat
Output:
<div class="resultitem" ng-repeat="a in vm.gettrustalbum">
<div class="result demo">
</div>
</div>
try this
<div class="resultitem" ng-repeat="a in vm.gettrustalbum">
<div class="result" ng-class="vm.classname"></div>
</div>
Load Class from your JSON array.
Assuming that you are having something unique in ur array
<div class="resultitem" ng-repeat="a in vm.gettrustalbum">
<div class="result" ng-class={"demo":a.unique}>
</div>
</div>
You can do some thing like this...
Share your array i will give u final answer
Related
I'm trying to select an element by clicking on its grand grand grand child. But I can't find the way without using parent().parent() etc.
General HTML
I have an HTML divided in pages
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
Inner page HTML
<div class="page">
<div class="">
<div class="to_move">
<div class="">
<div class="clicked_element"></div>
</div>
</div>
</div>
</div>
When clicking clicked_element I want to copy to_move class element to previous page.
The inner structure of the page element is not always the same, that's why I want to avoid using multiple parent().
I tried
$(this).parentsUntil('.page').html()
But I get only clicked_element parent.
$(this).parents('.page').html()
With this parents() option I get undefined.
$(this).closest('.page').html()
Again I get undefined.
Any clues welcome.
You could very well use closest :
$('body').on('click', '.clicked_element', function() {
$(this).closest('.page').clone().appendTo('body')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<div class="page">
<div class="">
<div class="to_move">
<div class="">
<div class="clicked_element">Click me to copy my whole class</div>
</div>
</div>
</div>
</div>
$(this).parents('.page') should work. I'm guessing you're binding the the wrong event. The key to this answer is not the selector ($(this).parents...) but the event binding ($(".clicked_element").click...). In your case, I guess that this is not the element you were looking for because the event binding is probably wrong.
$(".clicked_element").click(function() {
alert($(this).parents('.page').attr('printme'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="page" printme="You found me!">
<div class="">
<div class="to_move">
<div class="">
<div class="clicked_element" style="width: 250px; height:250px; background-color: blue">
</div>
</div>
</div>
</div>
</div>
I would like to know how to do the ngFor with two rows in angular flex layout.
<div *ngFor="let item of items">
<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap.xs="0">
<div class="item item-1" fxFlex="50%">
<div fxLayoutAlign="center" class="item-label">
{{item.name}}
</div>
<div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
</div>
<div class="item item-2" fxFlex="50%">
<div fxLayoutAlign="center" class="item-label">
{{item.name}}
</div>
<div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
</div>
</div>
<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap.xs="0">
<div class="item item-3" fxFlex="100%">
<div fxLayoutAlign="center" class="item-label">
{{item.name}}
</div>
<div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
</div>
</div>
</div>
Here its looping but each time its printing 3 values for every index. I would like to print index 0 value of first column, index 1 on second column and index 2 value on second row.
I've created for you an example on stackblitz, based on your requirements.
The correct way would be :
<div class="container" fxLayout="row wrap" fxLayoutAlign="center" fxLayoutGap.xs="0">
<!-- you can use ngClass to manage 'item-1' or 'item-2' style -->
<div class="item" fxFlex="50%" *ngFor="let item of items">
<div fxLayoutAlign="center" class="item-label">
{{item.name}}
</div>
<div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
</div>
</div>
The wrap/nowrap property on the fxLayout directive does everything, because childs are set with fxFlex="50%".
I put out fxLayout.xs to render it correctly on stackblitz.
Here is #angular/flex-layout documentation
Hope it helps ;-)
The "wrap" parameter in the "fxLayout" is used to wrap the child content with the help of "fxFlex"
First time question on this site. Sorry if I have failed the formatting test.
I am almost completely ignorant about javascript but I have been told I need it to solve this problem. I have a page where there are multiple divs with the same class. Each has a multi-level hierarchy beneath it. I want to stop the parent displaying if any of its children contain a div of a particular class. e.g. In the following code I want to stop all divs with class of "classa" displaying if one of their direct or indirect children contains class of "classb draft". So here, none of divb would display.
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa"
<div id="divabaaa" class="classb">
</div>
</div>
</div>
</div>
</div>
<div id="divb" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa"
<div id="divbbaaa" class="classb draft">
</div>
</div>
</div>
</div>
</div>
You are not closing div in
<div id="divabaa"
You can use querySelectorAll() to select all the children with that class (draft). Then use forEach() to loop through all the matching elements to find the closest() div with .classa to set display property to none.
var elements = document.querySelectorAll('.classa .draft');
elements.forEach(function(el){
el.closest('.classa').style.display = 'none';
});
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa">
<div id="divabaaa" class="classb">
Without Draft
</div>
</div>
</div>
</div>
</div>
<div id="divs" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa">
<div id="divbbaaa" class="classb draft">
Draft
</div>
</div>
</div>
</div>
</div>
I have a series of rows inside a ngFor.
<div *ngFor="let block of data;">
<div class="class-row">
<div class="left">A Label:</div>
<div class="right">{{block.key1}}</div>
</div>
<div class="class-row">
<div class="left">Another Label:</div>
<div class="right">{{block.key2}}</div>
</div>
</div>
It turns out that for some rows I would like to highlight {{block.key1}} or {{block.key2}} based on some logic.
Is there a way of doing this in angular 4+?
I thought of calling a component function and passing it the {{block.key1}} or {{block.key2}}, something like
<div *ngFor="let block of data;">
<div class="class-row">
<div class="left">A Label:</div>
<div [innerHTML]=highlight({{block.key1}}) class="right"></div>
</div>
<div class="class-row">
<div class="left">Another Label:</div>
<div [innerHTML]=highlight({{block.key2}}" class="right"></div>
</div>
</div>
but this is probably not possible.
Is there some way of changing the property of the text in the div dynamically?
Here is how you can do it. I assume when you talk about hightlight you mean CSS. If so you better use ngClass. Here is an example of how you can do it.
<div *ngFor="let block of data;">
<div class="class-row">
<div class="left">A Label:</div>
<div [ngClass]="[shouldHighlight(block.key2) ? 'highlight' : '']" class="right">{{block.key1}}</div>
</div>
<div class="class-row">
<div class="left">Another Label:</div>
<div [ngClass]="[shouldHighlight(block.key2) ? 'highlight' : '']" class="right">{{block.key2}}</div>
</div>
</div>
<!--You can also do it by this way -->
<div *ngFor="let block of data;">
<div class="class-row">
<div class="left">A Label:</div>
<div [class.highlight]="shouldHighlight(block.key1)" class="right">{{block.key1}}</div>
</div>
<div class="class-row">
<div class="left">Another Label:</div>
<div [class.highlight]="shouldHighlight(block.key2)" class="right">{{block.key2}}</div>
</div>
</div>
<style>
.highlight{
/* Your CSS Here*/
}
</style>
The answer by #Ulrich is correct, but I would like to expand on an alternative, that is easily missed.
That is: you are assuming you must call a function inside the ngFor. Well, this is true if you choose not to preprocess the data.
What I would try to do is preprocess data when loading it:
this.data.forEach(block => {
block.highlightKey1 = this.shouldHighlight(block.key1);
block.highlightKey2 = this.shouldHighlight(block.key2);
}
If you can extend the model to include also this extra fields, everything is smoother:
<div *ngFor="let block of data;">
<div class="class-row">
<div class="left">A Label:</div>
<div [ngClass]="[block.highlightKey1 ? 'highlight' : '']" class="right">{{block.key1}}</div>
</div>
<div class="class-row">
<div class="left">Another Label:</div>
<div [ngClass]="[block.highlightKey2 ? 'highlight' : '']" class="right">{{block.key2}}</div>
</div>
</div>
At runtime this solution is going to perform slightly better, because no function call is going to be made during change detection, but only at load.
I find it cleaner too, because no "complex logic" is going to be invoked directly by the template.
I'm using Protractor with Cucumber for my tests, but I can't get an element cause the classname is the same of others classes and it don't have other attribute.
How can i get this element?
The element is: "tileGrid content".
I can't use xpath cause the page is edited sometimes.
Here my html:
<div class="tileGrid content">
<div class="spacing-container undefined">
<div class="title">
<h3 class="h2 heading">External Services</h3>
</div>
</div>
</div>
Thank you for your help.
I'm imagining your structure to be something similar to:
<div>
<div class="tileGrid content">
<div class="spacing-container undefined">
<div class="title">
<h3 class="h2 heading">External Services</h3>
</div>
</div>
</div>
<div class="tileGrid content">
<div class="spacing-container undefined">
<div class="title">
<h3 class="h2 heading">Other Header</h3>
</div>
</div>
</div>
<div class="tileGrid content">
<div class="spacing-container undefined">
<div class="title">
<h3 class="h2 heading">Another Header</h3>
</div>
</div>
</div>
...
</div>
There are a few ways you could interact with something like this, but I'll give just 3 examples:
This will look for the first child with the div tag within its parent
by.css('div div.content:nth-of-type(1)')
This will look for the first child with any tag within its parent
by.css('div div.content:nth-child(1)')
This will look for the text inside the h3 tag, and will select the element 3 layers above it:
by.xpath('//*/h3[text()="External Services"]/../../..')
Or find a DIV which includes a H3 and the H3's text is External Services as following:
by.xpath('//div[contains(#class, "tileGrid")][.//h3[text()="External Services"]]')