I want to assign alternate class to rows in a table. I am using ng-repeat on
<tr ng-repeat="event in events">
I want to get output like this:
<tr class="odd">...</tr>
<tr class="event">....</tr>
I've tried this (doesn't work):
<tr ng-repeat="event in events" class="$index % 2 == 0? 'event' : 'odd'">
I can't get it to work. Also it seems like Angular is using 'class' attribute to. Why is it doing so? Can I tell AngularJS not to use the class attribute for internal evaluations?
Please help. Thanks!
You should be using the angular directives ngClassEven and ngClassOdd for this.
Have a look at the documentation section for how to use them
http://docs.angularjs.org/api/ng.directive:ngClassEven
http://docs.angularjs.org/api/ng.directive:ngClassOdd
From the Angular docs..
Use ng-class-odd ng-class-even
<li ng-repeat="name in names">
<span ng-class-odd="'odd'" ng-class-even="'even'">
{{name}}
</span>
</li>
As #ganaraj states ng-class-odd and ng-class-even are the right way to do this, but for the benefit of searchers, your initial proposal wasn't far off working in Angular >=1.2.19.
Here is a closely related example of something that would have worked and would also work if coloring more than alternate rows (e.g. every 3 rows):
<div>
<style>
.color0 {
background-color: lightblue;
}
.color1 {
background-color: lightyellow;
}
.color2 {
background-color: lightgray;
}
</style>
<div ng-repeat="result in results" ng-class="'color' + ($index % 3)">
<div>
<p>{{result.myText}}</p>
</div>
</div>
You can also use the ng-class-odd and ng-class-even directives directly within the ng-repeat directive.
<div class="cssOneProductRecord"
ng-repeat='..'
ng-class-odd="'cssProductOdd'"
ng-class-even="'cssProductEven'" >
Which gives us nice alternating classes for each row:
This example is taken from the following page, which also demonstrates how to turn JSON data into a friendly, responsive Master-View page:
Master-Views using AngularJS
Improving Fintan Kearney's answer,
From: https://docs.angularjs.org/api/ng/directive/ngClassOdd
Style.css
.odd {
color: red;
}
.even {
color: blue;
}
index.html
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
<li ng-repeat="name in names">
<span ng-class-odd="'odd'" ng-class-even="'even'">
{{name}}
</span>
</li>
</ol>
Related
<td *ngFor="let tbh of tblH; let i=index" on-mouseover="hoveredI=i" on-
mouseleave="hoveredI=-1">{{data[tbh]}}
<div class="onHoverDiv" *ngIf="i==hoveredI">
<ul>
<li (click)="editCell(data,tbh);">
<span class="fa fa-pencil"></span>
</li>
</ul>
</div>
</td>
this my HTML code to show edit icon on hover on specific table cell but the problem is its working but its show icon in all the particular column of table cell i want show edit icon on hover in specific table cell how this to be done
Try with the following css:
li.fa-pencil {
display: none;
}
li:hover.fa-pencil {
display: inline-block;
}
you need to set one extra key is_hover into your array.set is_hover by default false.and just set below code.
you need to set like first in the component.
tblH.foreach((tbh,i)=>{tblh[i].is_hover = false})
html
<td *ngFor="let tbh of tblH; let i=index" (mouseleave)="tbh.is_hover =!tbh.is_hover" (mouseenter)="tbh.is_hover =!tbh.is_hover">{{data[tbh]}}
<div class="onHoverDiv" *ngIf="tbh.is_hover">
<ul>
<li (click)="editCell(data,tbh);">
<span class="fa fa-pencil"></span>
</li>
</ul>
</div>
</td>
i am new to angular js . I lkie the angular js filter option. How to apply filter option for following div
<div class="block-parent" ng-app="">
<input type="text" name="search">
<div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
<div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
<div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>
Example: When user type nick on search box then only <div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div> is need to show $ other two div is need to hide . i see this documentation https://docs.angularjs.org/api/ng/filter/filter . Please help .
UPDATE : To do this task without Angular js Please refer
Jquery search using real time input , like Filter option in Angular JS
Use ng-repeat, combined with filter. While you display each item stored in your $scopes model through ng-repeat you can just filter them by using a input field. A specified model in your input field tied up with a proper filter will do the trick.
Markup
<div ng-app="demo" ng-controller="ctrl">
<input type="text" ng-model="search">
<div class="block-parent" ng-repeat="answer in answers | filter: search">
{{ answer }}
</div>
</div>
JS
angular.module('demo', [])
.controller('ctrl', function($scope) {
$scope.answers = [
'Nick',
'Sam',
'John'
]
})
Demo
I have 2 directives: wa-hotspots & wa-tooltips.
On ng-mouseover of wa-hotspots it takes that $index of wa-hotspot and sets the visibility and position of wa-tooltip via ng-class:on and ng-style="tooltipCoords" by matching indexes.
Note: Since wa-hotspots & wa-tooltips share the same collection page.hotspots and therefore they share teh same index via ng-repeat
Problem:
When you hover over wa-hotspots it sets the ng-style position to ALL of the elements in wa-tooltips. I only want it ot set the proper matching index. Since the visiblity is controlled by ng-class, This doesn't really matter but it seems like it's extra overhead that could be avoid.
Therefore:
Question:
How can I make sure that my ng-style isn't styling all the wa-tooltips on hover of wa-hotspots? But rather, style only the tooltip that matches the proper shared index?
<ul id="wa-page-{{page.pageindex}}" class="wa-page-inner" ng-mouseleave="pageLeave()">
<li wa-hotspots
<map name="wa-page-hotspot-{{page.pageindex}}">
<area ng-repeat="hotspot in page.hotspots"
class="page-hotspot"
shape="{{hotspot.areashape}}"
coords="{{hotspot.coordinatetag_scaled}}"
ng-mouseover="showTooltip($index, hotspot.coordinatetag_scaled)"
ng-mouseout="hideTooltip()">
</map>
</li>
<li class="tooltip-wrapper">
<ul class="tooltip">
<li wa-tooltips
ng-repeat="hotspot in page.hotspots"
ng-class="{on: hovered.index == $index}"
ng-mouseover="hovered.active == true"
ng-mouseout="hovered.active == false"
ng-style="tooltipCoords" hotspot="hotspot">
</li>
</ul>
</li>
</ul>
tooltip:
You need to make it per item like in your case - hotspot.tooltipCoords then set that variable by index.
you can do the check inside the expression function.
Heres a fiddle
<div ng-controller="MyCtrl">
<div ng-repeat="item in items" ng-style="isChecked($index)">
name: {{item.name}}, {{item.title}}
<input type="checkbox" ng-model="item.checked" />
</div>
</div>
...
$scope.isChecked = function($index){
var color = $scope.items[$index].checked ? 'red' : 'blue';
return {color:color};
}
Instead of
ng-mouseover="hovered.active == true"
ng-mouseout="hovered.active == false"
use
ng-mouseover="hotspot.class== 'active'"
ng-mouseout="hotspot.class== ''"
and after that you can use hotspot.class in ng-class ie:
ng-class="hotspot.class"
Please see demo below:
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
$scope.items = [{
id: 1
}, {
id: 2
}, {
id: 3
}, {
id: 4
}]
});
.red {
background-color: yellow;
}
p {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<p ng-repeat="i in items" ng-mouseover="i.class='red'" ng-class="i.class" ng-mouseout="i.class = ''">{{i.id}}</p>
</div>
</div>
Use the below one
<div class="col-md-4 col-xs-12 col-lg-4" ng-repeat="obj in items">
<button type="button" class="btn btn-sm pull-right" ng-class="obj.class" ng-click="obj.class='test'" >
Write a new class "test". Instead of click you can use the same in ngmouseover
Here is my angular code:
<div ng-repeat="s in doc.Summaries">
<a href="#" ng-click="doc.summaryIdShown = s.index">
{{s.SummaryState}}: {{s.StopLightColor}}, {{s.LevelOfEvidence}} - {{s.UserName}} - {{s.UpdateTimeStamp | date}}
</a>
<br />
<br />
</div>
In the code I am displaying a link for every version (s in doc.Summaries) of a document. Then, when a user clicks on the link I update my model variable "summaryIdShown" and the version being presented on the side is updated. The issue is: I would like to update these links so that the link corresponding to the version being shown so that it looks different. How would I do that?
I thought about writing a custom directive but I am having trouble with the implementation.
Thanks in advance.
Add ng-class directive, pass in an object which has a class name you want to add and a boolean condition which it should check:
<div ng-repeat="s in doc.Summaries">
<a href="#" ng-click="doc.summaryIdShown = s.index" ng-class="{'green': doc.summaryIdShown === s.index}">
{{s.SummaryState}}: {{s.StopLightColor}}, {{s.LevelOfEvidence}} - {{s.UserName}} - {{s.UpdateTimeStamp | date}}
</a>
<br />
<br />
</div>
CSS:
.green {
color: green;
}
I am trying to display a binary tree of elements, which I go through recursively with ng-include.
What is the difference between ng-init="item = item.left" and ng-repeat="item in item.left" ?
In this example it behaves exactly the same, but I use similiar code in a project and there it behaves differently. I suppose it's because of Angular scopes.
Maybe I shouldn't use ng-if, please explain me how to do it better.
The pane.html is:
<div ng-if="!isArray(item.left)">
<div ng-repeat="item in [item.left]" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.left)">
{{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
<div ng-repeat="item in [item.right]" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.right)">
{{item.right[0]}}
</div>
<div ng-if="!isArray(item.left)">
<div ng-init = "item = item.left" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.left)">
{{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
<div ng-init="item = item.right" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.right)">
{{item.right[0]}}
</div>
The controller is:
var app = angular.module('mycontrollers', []);
app.controller('MainCtrl', function ($scope) {
$scope.tree = {
left: {
left: ["leftleft"],
right: {
left: ["leftrightleft"],
right: ["leftrightright"]
}
},
right: {
left: ["rightleft"],
right: ["rightright"]
}
};
$scope.isArray = function (item) {
return Array.isArray(item);
}
});
EDIT:
First I run into the problem that the directive ng-repeat has a greater priority than ng-if. I tried to combine them, which failed. IMO it's strange that ng-repeat dominates ng-if.
It's a little hacky, but I am passing variables to an ng-include with an ng-repeat of an array containing a JSON object :
<div ng-repeat="pass in [{'text':'hello'}]" ng-include="'includepage.html'"></div>
In your include page you can access your variable like this:
<p>{{pass.text}}</p>
Pass parameter to Angular ng-include
You don't need that. all ng-include's sources have the same controller. So each view sees the same data.
What is the difference between ng-init="item = item.left" and ng-repeat="item in item.left"
[1]
ng-init="item = item.left" means - creating new instance named item that equals to item.left. In other words you achieve the same by writing in controller:
$scope.item = $scope.item.left
[2]
ng-repeat="item in item.left" means create list of scopes based on item.left array. You should know that each item in ng-repeat has its private scope
I am trying to display a binary tree of elements, which I go through recursively with ng-include.
I posted in the past answer how to display tree by using ng-include.
It might helpful: how-do-display-a-collapsible-tree
The main part here that you create Node with id wrapped by <scipt> tag and use ng-repeat:
<script type="text/ng-template" id="tree_item_renderer">
<ul class="some" ng-show="data.show">
<li ng-repeat="data in data.nodes" class="parent_li" ng-include="'tree_item_renderer'" tree-node></li>
</ul>
</script>
<ul>
<li ng-repeat="data in displayTree" ng-include="'tree_item_renderer'"></li>
Making a generic directive instead of ng-include is a cleaner solution:
Angular passing scope to ng-include
I am using ng-include with ng-repeat of an array containing string. If you want to send multple data so please see Junus Ergin answer.
See my code Snippet:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
<div ng-repeat="name in ['Sanjib Pradhan']" ng-include="'your_template.html'"></div>
<div ng-repeat="name in ['Chinmay Sahu']" ng-include="'your_template.html'"></div>
<script type="text/ng-template" id="your_template.html">
{{name}}
</script>
</div>