I have a model, i.e. like this:
[{
"Name" : "Foo",
"CssClass" : "class1"
},
{
"Name" : "Bar",
"CssClass" : "class2"
}]
Which is presented using the following template:
<li v-for="foobar in model">
<span class="otherclass anotherclass">{{foobar.Name}}</span>
</li>
How could I append the CssClass property to the span?
I know you could do :class="{ active: isActive }" (as per the documentation), but this uses a predefined class called active, whereas I want to append the class name from the model.
I tried using <span class="otherclass anotherclass" :class="foobar.CssClass"> but that didn't add CssClass to class at all.
How could I go about making this work so that the <span> will effectively be rendered as <span class="otherclass anotherclass class1"> (for the first model entry)? And how could I also use a default value in case CssClass is not defined?
You can append the class like so
<li v-for="foobar in model">
<span :class="foobar.CssClass" class="otherclass anotherclass">{{foobar.Name}}</span>
</li>
I ran into the same issue in the past. During render all three classes will combine into one class="my_class_from_foobar otherclass anotherclass"
You can pass an object or an array to :class. You can also use class and :class together and Vue will resolve both correctly without issues:
<li v-for="foobar in model">
<span class="otherclass anotherclass" :class="[foobar.CssClass]">{{foobar.Name}}</span>
</li>
<li v-for="foobar in model">
<span :class="'otherclass anotherclass ' + foobar.CssClass">{{foobar.Name}</span>
</li>
<li v-for="foobar in model">
<span :class="foobar.CssClass" class="otherclass anotherclass">{{foobar.Name}</span>
</li>
Both should work
Related
<ul class="days">
<liclass="day" *ngFor="let day of currentDays; let i = index"(click)="setStyle()">
{{day}}
</li>
</ul>
My question is how to add style to exactly specified element in list, when i use ngClass styles are added to all elements? It posible using method add pass reference to element and set style?
You can conditionally set using ngStyle. refer the following code.
<div [ngStyle]="{'background-color':isTrue === true ? 'green' : 'red' }"></<div>
Or refer the stackblitz link for another solution.
enter link description here
You can set different class to each element
<ul class="days">
<li *ngFor="let day of currentDays; let i = index" [class]="'day'+(index+1)">
{{day}}
</li>
</ul>
in css set style to each one:
.day1{
...
}
You can use
<li [class.your-class]="expression">
For example:
<li [class.mat-elevation-z10]="i === selectedElement">
Or you can use ngClass with expressions
<li [ngClass]="{'first': true, 'second': true, 'third': false}">
Where first, second and third are your classes and true, true, false are the expressions. In the example above, both first and second class would be applied.
You can use ngClass itself with conditions. You can replace RequiredDay string with variable.
<ul class="days">
<li [ngClass]="{'desiredClass':day === 'RequiredDay'}" *ngFor="let day of currentDays; let i = index" (click)="setStyle()">
{{day}}
</li>
</ul>
I have unordered list in which I want different different class for each li which will be dynamic.
my code is
$scope.className = ['clr1','clr2','clr3','clr4','clr5'];
My Html :
<div>
<ul>
<li ng-repeat="item in mainitem" ng-style="{color: color[$index]}" >
<span ng-class="{className [$index]}">{{ item.name}}</span> // At this line I ahve added dynamic class but its not working
</li>
</ul>
</div>
This is not applied class as per classname array !!
Is there any issue with this code ? Thanks for helping !!
you can use [] instead of {}
<div>
<ul>
<li ng-repeat="item in mainitem" ng-style="{color: color[$index]}" >
<span ng-class="[className[$index]]">{{ item.name}}</span>
</li>
</ul>
</div>
for example of working see this codepen codepen
As the code is posted in the question, you are missing an opening brace when evaluating the class name
<span ng-class="{className [$index]}">{{ item.name}}</span>
should be
<span ng-class="{{className [$index]}">{{ item.name}}</span>
when it doesn't evaluate, you will end up with no class at all
I, am trying to bind the class in the pagination with the following code.
<ul class="pagination hidden-xs pull-right">
<li *ngFor="let pagItem of _pagination">
<a style="cursor: pointer;"
(click)="paginationClick($event)"
id="{{pagItem.pageNo}}"
[ngClass]="{'active': pagItem.pageNo === currentPage}">
{{pagItem.pageNo}}
</a>
</li>
</ul>
In the comparison I am getting object object
Here is the response from the api
The Page and Id is bind successfully. However I am getting the object object on class binding
Here is the image
This is only because you use an Array at
[ngClass]="{'active': pagItem.pageNo === currentPage}"
However your code should works.
this has to be used when you have many possible class result like this :
[ngClass]="{'active': pagItem.pageNo === currentPage, 'inactive': pagItem.pageNo !== currentPage}"
You could also do this to avoid the [Object, Object] rendering,
[class.active]="pagItem.pageNo === currentPage"
Be sure that your variable currentPage is set in your component and shared the same type.
Try this and ensure pagItem.pageNo and currentPage are the same type.
<ul class="pagination hidden-xs pull-right">
<li *ngFor="let pagItem of _pagination">
<a style="cursor: pointer;"
(click)="paginationClick($event)"
id="{{pagItem.pageNo}}"
[class.active]="pagItem.pageNo === currentPage">
{{pagItem.pageNo}}
</a>
</li>
</ul>
I had the same issue and [ngClass] didn't work. Then I changed to different syntax and it solved the problem.
[class.your-css-class]="yourVariable"
Your code should work if you use a ternary expression:
[ngClass]="pageItem.pageNo === currentPage ? 'active': ''"
I am using simple jquery selector but unfortunately didn't get the required result.
my code is:
$(document).ready(function() {
var displayName = $('.divclass').find('ul').find('li:first').text();
if ($('.divclass').find('ul').find('li:selected').length) {
displayName = $('.divclass').find('ul').find('li:selected').text();
}
$('divclass').find('button').html(displayName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divclass">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="true">
sometext
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
sometext1
</li>
<li selected="selected">
sometext2
</li>
<li>
sometext3
</li>
</ul>
</div>
I called it on document.ready. It executes but did not give me the proper result, what I am doing wrong to select the li with selected attribute.
:selected has a specific meaning: An option element that is currently selected. Perhaps somewhat counter-intuitively, that selected state is not reflected in an attribute (just the default) and again, it only applies to option elements.
selected isn't a valid attribute for li elements. You could either use data-selected for your own flag attribute, or a class.
If you used data-selected, you'd use [data-selected] in the selector:
<li selected="selected">
...find('ul').find('li[data-selected]').length...
...and then add/remove the attribute as appropriate.
If you use a class instead, it's a class selector:
<li class="selected">
...find('ul').find('li.selected').length...
...and then you add/remove the class as appropriate.
So using *ngFor i displayed the list of name property of object, this object also has a property named isAvailable I want to set isAvalable property to toggle between true and false when I click on it, and based on isAvalible a text next to li will display is available or not
<p>Authors</p>
<ul>
<li *ngFor='let author of authors' (click)='onClick()'>
{{author.name}}
</li>
</ul>
As I understand you want this
<p>Authors</p>
<ul>
<li *ngFor='let author of authors'>
<span [hidden]='author.isAvalible'>{{author.name}}</span>
<span (click)='author.isAvalible = !author.isAvalible '>author.isAvalible</span>
</li>
</ul>
<p>Authors</p>
<ul>
<li *ngFor='let author of authors'>
<span [hidden]='author.isAvalible'>{{author.name}}</span>
<span (click)='onClick()'>author.isAvalible</span>
</li>
</ul>
onClick(value){
value=!value;
}