Develop Reference

Add a counter to Angular ng-repeat?

I am trying to find some documentation for being able to append a counted number to each item returned by an ng-repeat. Is this not an out of a box thing for Angular? Not quite like an Id, but more like, if 4 items returned, each item JSON object could add a number in front of data returned. My code looks like:
<div class="swipeBoxes" ng-repeat="swipe in swipes">
<a href="#">
<div class="swipeBox">
<span class="swipeNum"></span>
<p><span>swipe date:</span><span>{{ swipe.date | date: 'MM/dd/yyyy'}}</span></p>
<p><span>provider:</span><span>{{ swipe.merchant }}</span></p>
<p><span>amount:</span><span>{{ swipe.amount | currency }}</span></p>
</div>
</a>
</div>

You can use $index for your counter.
<div class="swipeBoxes" ng-repeat="swipe in swipes">
{{$index + 1}}
</div>

Using $index from ngRepeat should be able to solve your problems.

$index issue in Angular

I am having issue with $index in angular.I have a ng-repeat inside which I am using $index to keep track of unique class.
Here is my code:
<div ng-repeat="style in styleArr">
<div class="myclass{{ $index }}">
</div>
</div>
In angular controller I am appending a div inside myclass0,But not working.
Here is my controller.
myClass = angular.element('.myclass0');
myClass.append('<div class="test">Hello World..<test>');
When I try to do this:
<div ng-repeat="style in styleArr">
<div class="myclass0">
</div>
</div>
Its working fine.Any suggestion?

I think you want a unique classes for each div for applying a unique CSS. You can implement it by assigning a unique class or assigning a unique Id. For a Class, you need to use "ng-class" directive.
<div ng-repeat="style in styleArr">
<div ng-class="myclass{{ $index }}">
</div>
</div>
For a unique Id use :
<div ng-repeat="style in styleArr">
<div id="style{{ $index }}">
</div>
</div>
Best option is to use unique Id for performing a operation. If you want to assign only a styles then use Unique classes.

Use ng-class, it allows for expressions in the class name
<div ng-repeat="style in styleArr">
<div ng-class="myclass{{ $index }}">
</div>
</div>
More info on ng-class: https://docs.angularjs.org/api/ng/directive/ngClass

Use "ng-class" instead of "class"
<div ng-repeat="style in styleArr">
<div ng-class="myclass{{ $index }}">
</div>
</div>

you have to change class for ng-class

You can't do it reliably the what you are trying to do it. You need to understand how digest cycle and compilation/rendering of templates in Angular works. Then you would understand that element with class myclass0, myclass1, etc. - are not available at the time yo are trying to fetch them from DOM. Again - this is the reason why you should never do any DOM manipulations in controllers.
You should either use custom directive i your case or existing Angular directives like ngIf/ngShow, etc.
For example:
<div ng-repeat="style in styleArr">
<div class="myclass" ng-if="style.show">
<div>Hello ...</div>
</div>
</div>
and in controller
// show "Hello" in the first myclass
$scope.styles[0].show = true;

My advice would be not to have DOM manipulation inside controllers. That is what directive is used for. However in your case if you just want to append a div for the first iteration you can do something like this:
<div ng-repeat="style in styleArr">
<div ng-show="$first" class="test">Hello World..</div>
</div>
More on ng-repeat and $first

How to set scope variable inside ng-repeat?

I want to determine whether any ng-repeated element is rendered.
I write this code
<div ng-show="anyRendered">Any has been rendered</div>
<div ng-show="anyFilterActive">ANY FILTER IS ACTIVE</div>
<div class="selected-filter-value" ng-if="filter.name && filterCtrl.isActiveFilter(filter)" data-ng-repeat="(name, filter) in filterOptions">
<span ng-init="anyFilterActive = true;">{{filter.name}}:</span>
</div>
But this code doesn't work. Also I try to write $parent.anyRendered inside ng-repeat.

Try with ng-if
<div ng-show="filterOptions.length > 0">Any has been rendered</div>
<div ng-if="filterOptions.length > 0" ng-repeat="(name, filter) in filterOptions">
<span></span>
</div>

just use $index
<div ng-repeat="(name, filter) in filterOptions">
<span ng-show="$index > 0"></span>
</div>
ngRepeat Docs $index
In the example in the ng-repeat docs u can see the usage of $index

You must not write code logic in your templates: all the code must be in your controllers, filters, directives and services. The ng-init directive is only here so that you can create aliases to make your templates simpler.
Filters and directives contain "presentation code" and controllers and services contain "business related code".
You could create a filter to know if an object is empty or not (filter code from another question), and use it with ng-if, ng-show...
Resulting template:
<div ng-if="filterOptions|empty">
Nothing to show!
</div>
<div ng-repeat="(k, v) in filterOptions">
{{k}}, {{v}}
</div>

using ngIf with ngRepeat

Hi i am trying to use two types of ng-repeat statements based on the codition using ng-if. Somehow it is not working.
Code:
<div ng-if="orderby === '0'">
<div ng-repeat="user in users | filter:search"></div>
</div>
<div ng-if="orderby === '1'">
<div ng-repeat="user in users | filter:search| orderBy:'-timestamp'"></div>
</div>
I have two controller, they are using the same template. In one template i set the value of $scope.orderby = '0' . In this template i want to use ng-repeat without orderBy and vice versa.
This isn't working out. Is there other way of doing this type of functionality?

Create object : someObjectName.orderby instead of primitive variable orderby.
And your binding will be:
<div ng-if="someObjectName.orderby === '0'">
<div ng-repeat="user in users | filter:search"></div>
</div>
<div ng-if="someObjectName.orderby === '1'">
<div ng-repeat="user in users | filter:search| orderBy:'-timestamp'"></div>
</div>
ng-repeat have another scope and your orderby variable out of ng-repeat is not same in orderby inside ng-repeat scope.
Read this article for more information about scopes: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Filters in Angular Js

I am trying to apply the filters on the ng-repeat based on user selection in section options.But unable to do that so far.
Update-It works !!
Here's Plunker
HTML
<div class="container">
<div ng-include="" src="'refiners.html'"></div>
<br />
<br />
<div class="row">
<div class="col-xs-12">
<ul>
<li ng-repeat="item in data.Results | filter:cc">
<div>
<p>{{item.Title}}</p>
<p>{{item.City}}</p>
<p>{{item.PostalCode}}</p>
<span>{{item.MinimumSalePrice | currency}}</span>
<span>{{item.MaximumSalePrice |currency}}</span>
<p>{{item.PropertyType}}</p>
<p>{{item.TenureType}}</p>
</div>
</li>
</ul>
</div>

When you do ng-include you create a new scope so cc is always empty in the parent scope.
This is similar to the issue in this in question. AngularJS - losing scope when using ng-include
You can fix it by adding $scope.cc={} to your controller (creating this element in the parent $scope so the filter has access to it. For this to work you will have to remove the ng-init calls from refiners.html, since these will create a new object in the child scope.