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': ''"
Related
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
I'm trying to detect which property is selected/clicked out of ngFor , which comes from a REST API.
I want to get which property(broker.username) is selected out of others
<div class="list-group">
<ul *ngFor="let broker of brokers">
<li class="broker_list"> {{broker.username}}</li>
</ul>
</div>
this is the REST call
[
{ id: 1, username: "PersonA"},
{ id: 2, username: "PersonB"}
]
You have to use event handler on anchor tag like this:
<div class="list-group">
<ul *ngFor="let broker of brokers">
<li class="broker_list">
<a (click)="onSelect(broker)" href="#" class="list-group-item list-group-item-action" style="text-align: center;"> {{ broker.username }}</a>
</li>
</ul>
</div>
Within your component add method:
#Component({ })
class XYZ {
// ... some code
public onSelect(broker) {
// Do what you need with broker?
}
}
Pass the broker directly in the method, like this
<div class="list-group">
<ul *ngFor="let broker of brokers">
<li class="broker_list"> {{broker.username}}</li>
</ul>
</div>
There are several ways, one of those would be to do something like this.
1) Add click handler on a tag:
<div class="list-group">
<ul *ngFor="let broker of brokers">
<li class="broker_list"> {{broker.username}}</li>
</ul>
</div>
2) Add method to component:
selected(brokerName: string) {
console.log(brokerName);
}
You could add a (click) property that calls a function, which takes a broker as a parameter. You can then access the username of that broker.
{{broker.username}}
The a tag should be able to know what the current broker is, since it is inside the *ngFor.
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 have a very strange issue. I have to set an active class on the appropriate <li> when the $scope.selectedCat == cat.id. The list is generated with ng-repeat. If selectedCat is false, the 'Browse All Categories' list item (outside of ng-repeat) is set to active. setCat() sets the value of the $scope.selectedCat variable:
<div id="cat-list" ng-controller="CatController">
<li ng-class="{'active': {{selectedCat == false}}}">
<a>
<div class="name" ng-click="setCat(false)" >Browse All Categories</div>
</a>
</li>
<li class="has-subcat" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': {{selectedCat == cat.id}}}">
<a>
<div cat class="name" ng-click="setCat({{cat.id}})" ng-bind-html="cat.name | highlight:catsearch"></div>
</a>
</li>
</div>
When the page loads, everything works fine (snapshot from FireBug):
<li ng-class="{'active': true}" class="ng-scope active">
<!-- ngRepeat: cat in cats | filter:catsearch -->
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': false}">
However when I set $scope.selectedClass to a cat.id value, the condition within ng-class gets evaluated correctly, but ng-class won't update the classes accordingly:
<li ng-class="{'active': false}" class="ng-scope active"> <!--Right here!-->
<!-- ngRepeat: cat in cats | filter:catsearch -->
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': true}">
Please note that in the first line active class stays set, while ng-class evaluates to false. In the last line active is not set, while ng-class evaluates to true.
Any ideas why it doesn't work? What's the correct Angular way of doing this?
Replace:
ng-class="{'active': {{selectedCat == cat.id}}}"
With:
ng-class="{'active': selectedCat == cat.id}"
You never need to nest those curly braces like that, in Angular.
Have a look at the ng-class documentation for some more examples.
Instead of
ng-class="{'active': {{selectedCat == cat.id}}}"
use
ng-class="{active: selectedCat == cat.id}"
Hi i'm also facing the same problem. i solved the problem by the way instead of assigning the value directly to ng-class, call the separate method and return the value.
ex :
ng-class="getStyleClass(cat)"
$scope.getStyleClass = function(cat) {
return "active: selectedCat == cat.id";
}
roughly i coded. please change the method as per your requirement.
Expanding on the answer #Cerbrus gave:
Replace:
ng-class="{'active': {{selectedCat == cat.id}}}"
With:
ng-class="{'active': selectedCat == cat.id}"
I had an issue with an expression using a filter, that would not evaluate properly without double curly braces {{ }}.
Example: ng-class="{'active': {{ selectedCat | filter:catType }} == cat.id}"
I solved it by putting parentheses instead of curly braces.
Solution: ng-class="{'active': ( selectedCat | filter:catType ) == cat.id}"
Did you solve it?
In my opinion you should use
ng-class="{'active': {{controller.selectedCat == cat.id}}}"
With:
ng-class="{'active': controller.selectedCat == cat.id}"
this will help you.
I have a list of items. An item can be a number of things, let's say the list is something like so :
[userObject , vehicleObject , userObject , animalObject , animalObject]
Now I want to render the list with ngRepeat directive that will use a template according to the type of the object (Polymorphic rendering). can this be done?
maybe something like (ng-use is an hypothetically directive):
<ul>
<li ng-repeat="item in items">
<img ng-use="item.type == 'user'" ng-src="item.src">
<a ng-use="item.type == 'vehicle'">{{item.link}}</a>
<span ng-use="item.type == 'animal'">{{item.name}}</span>
</li>
</ul>
<ul>
<li ng-repeat="item in items" ng-switch="item.type">
<img ng-switch-when="user" ng-src="item.src">
<a ng-switch-when="vehicle">{{item.link}}</a>
<span ng-switch-when="animal">{{item.name}}</span>
</li>
</ul>
API reference:
http://docs.angularjs.org/api/ng.directive:ngSwitch
Although this doesn't use ng-switch, it does get round the problem of not having a type field, which #DotNetHaggis pointed out.
<div ng-repeat="field in fields">
<div ng-if="field.user !== undefined">user info</div>
<div ng-if="field.vehicle !== undefined">vehicle info</div>
<div ng-if="field.animal !== undefined">animal info</div>
</div>