I have a strings array in my controller that I iterates with ng-repeat in my view. I want the first element of the array with other color. How can I do this?
<div ng-repeat="lang in vm.language">
{{lang}}
</div>
You can use $first in your loop.
<div ng-repeat="lang in vm.language">
<span ng-class="{'some-css-class': $first}">{{lang}}</span>
</div>
You can use the ng-class directive with $first in your ng-repeat loop
<div ng-repeat="lang in vm.language">
<span ng-class="{first-element: $first}">{{lang}}</span>
</div>
And your css class may look like this
.first-element{
color: #CC0097;
}
Hope this will help you !!
Related
How can I make bootstrap "jump" to the next row inside ng-repeat.
To clarify, I have something like this:
<div class=row>
<div class="col-sm-3" ng-repeat="field in fields">
</div>
</div>
What I want is to jump to the next row based on a condition inside ng-repeat. Like this:
[1][2][3]
[4][5]
[6][7][8]
The catch here is that I have to jump columns inside the column div.
Does anyone know the best way to solve this? Please tell me if my question isn't clear.
played a bit with ng-class hope that helps
its a bit confusing how bootstrap class works with angular
http://jsfiddle.net/8n9u54ud/
js:
angular.module('app',['QuickList']).controller('mainCtrl', function($scope){
$scope.myJson = [1,2,3,4,5,6,7,8,9]
})
html:
<div ng-app='app' ng-controller='mainCtrl'>
<div class="row">
<div ng-repeat="i in myJson" ng-class="{'col-sm-4':i!=5, 'col-sm-5':i==5}">
{{i}}
</div>
</div>
</div>
UPDATED
I am looking for the first index the passes through my ng-if condition which is not always $index === 0, and cant be solved using $first.
Here's my code sample:
<div class="ticket-event" ng-if="!item.hidden" ng-repeat="item in ctrl.event.items">
<div class="title item" ng-class="{'active': $index === $first}"></div>
</div>
I want to add a class in the first occurrence of item.
You don't have to check if $index is $first in:
<div class="title item" ng-class="{'active': $index === $first}">
Change it to:
<div class="title item" ng-class="{'active': $first}">
Why not do this via css?
Assuming "ticket -event" is a spelling mistake, and it should be "ticket-event", the css is straightforward:
.ticket-event div:first-child { // css here }
Here is what you need to do:
<div class="title item" ng-class='{active:$first}'></div>
<tr ng-class="{evaluationRow : $index==0 && item.HighlightBorder==true }" ng-repeat="item in items" >
<td>{{item.LearnerId}} </td>
<td>{{item.Name}}</td>
This has worked for me. Here I'm setting Css class for first element in ng-repeat only if a condition holds true otherwise 'No' Css class is applied.
In above example, "evaluationRow" is the name of Css class to apply, followed by a condition.
You can make use of $first
It will evaluate to true for the first element in ng-repeat
So your code should be
<div class="ticket-event" ng-if="!item.hidden" ng-repeat="item in ctrl.event.items">
<div class="title item {{$first?'active':'someotherclass'}}"></div>
</div>
This worked for me
<div class="title item" ng-class='{active:$first}'></div>
I have the template:
<div ng-repeat="CableFilterName in CableFilterNames">
<fieldset>
<legend>{{CableFilterName.filterName}}</legend>
<ul id="">
<li ng-repeat="filterValue in CableFilterName.filterValues">
<input type="checkbox"/> {{filterValue}}
<!-- <select> -->
</li>
</ul>
</fieldset>
</div>
where filterValue in nested ng-repeat has several different values. So question is how to define what is current filterValue-value and depending on it use checkbox or select or any arbitrary HTML ?
UPD:
filterValues = ['Cable System','Electrical', 'Lighting'];
To have a kind of if statement, you can use the ngSwitch directive in AngularJS :
http://docs.angularjs.org/api/ng.directive:ngSwitch
For example on your ngRepeat loop :
<div ng-switch on="filterValue">
<div ng-switch-when="value1">//Do what you want when "value1"</div>
<div ng-switch-when="value2">//Do what you want when "value2"</div>
...
<div ng-switch-default>//Do what you want by default</div>
</div>
I Hope it's what you want, I don't really understand what you try to achieve.
I would like to use ng-switch because I do not want the other elements that I do not want to show to be part of the DOM. That is why i did not use ng-hide/ng-show. In the example below, I would like to only have the span tag be in the DOM without the div wrappers from the ng-switch. What is the best way to accomplish this?
<div ng-switch on="user">
<div ng-switch-when="true">
<span>One</span>
</div>
<div ng-switch-when="false">
<span>Two</span>
</div>
</div>
You can use the ng-switch directive as a custom element and not specify the div in the first place. For example:
<ng-switch on="user">
<span ng-switch-when="true">One</span>
<span ng-switch-default>Two</span>
</ng-switch>
Here is a plunker to play around with: http://plnkr.co/edit/zni6raUWOguhQh9jDiY3
the solution provided by #ChrisAuer this still creates a wrapping element.
AFAIK you'd have to use a custome directive. You may want to use angular-ui if
<div ui-if="user">
<span>One</span>
</div>
<div ui-if="!user">
<span>Two</span>
</div>
Probably, in your case, you'd be fine using ng-show or ng-hide which only hide(display:none) the element - they don't remove it form the DOM.
<div ng-show="user"> <!-- same as ng-hide="!user" -->
<span>One</span>
</div>
<div ng-hide="user"> <!-- same as ng-show="!user" -->
<span>Two</span>
</div>
I would say use ng-if, like this:
<div>
<div ng-if="user==true">
<span>One</span>
</div>
<div ng-if="user==false">
<span>Two</span>
</div>
</div>
you can use <span> to prevent your html layout changing
because <span> is not like <div>, it won't take up any space.
<span ng-switch="user">
<span ng-switch-when="true">One</span>
<span ng-switch-default>Two</span>
</span>
I am creating a list using ng-repeat something like this
<div ng-repeat="file in files">
{{file.name}}
</div>
But for the last element alone I would like to have a class (<div class="last">test</div>) included to it. how can i achieve this using ng-repeat?
You can use $last variable within ng-repeat directive. Take a look at doc.
You can do it like this:
<div ng-repeat="file in files" ng-class="computeCssClass($last)">
{{file.name}}
</div>
Where computeCssClass is function of controller which takes sole argument and returns 'last' or null.
Or
<div ng-repeat="file in files" ng-class="{'last':$last}">
{{file.name}}
</div>
It's easier and cleaner to do it with CSS.
HTML:
<div ng-repeat="file in files" class="file">
{{ file.name }}
</div>
CSS:
.file:last-of-type {
color: #800;
}
The :last-of-type selector is currently supported by 98% of browsers
To elaborate on Paul's answer, this is the controller logic that coincides with the template code.
// HTML
<div class="row" ng-repeat="thing in things">
<div class="well" ng-class="isLast($last)">
<p>Data-driven {{thing.name}}</p>
</div>
</div>
// CSS
.last { /* Desired Styles */}
// Controller
$scope.isLast = function(check) {
var cssClass = check ? 'last' : null;
return cssClass;
};
Its also worth noting that you really should avoid this solution if possible. By nature CSS can handle this, making a JS-based solution is unnecessary and non-performant. Unfortunately if you need to support IE8> this solution won't work for you (see MDN support docs).
CSS-Only Solution
// Using the above example syntax
.row:last-of-type { /* Desired Style */ }
<div ng-repeat="file in files" ng-class="!$last ? 'class-for-last' : 'other'">
{{file.name}}
</div>
That works for me! Good luck!
You could use limitTo filter with -1 for find the last element
Example :
<div ng-repeat="friend in friends | limitTo: -1">
{{friend.name}}
</div>
The answer given by Fabian Perez worked for me, with a little change
Edited html is here:
<div ng-repeat="file in files" ng-class="!$last ? 'other' : 'class-for-last'">
{{file.name}}
</div>