Develop Reference

Loop to visible items in ng-repeat

It is possible to loop to the visible items in a ng-repeat?
I have a ng-repeat with multiple filters and I want to create a 'select all' function to select all the visible items in the repeat.
How can I get the visible items? The selection may be come undone when the filter is changing, so there are no 'old' selections possible, but that can be easily done to loop all items with no conditional.
<div class="item" ng-repeat='item in collection | product_sex:filter_sex | product_stock: stockKind | filter:productFilter'>
{{item.name}}
{{item.price}}
</div>

you can add a filter like this;
<div ng-repeat="item in items | filter:{visible: true} ">
<p>{{item.id}}</p>
</div>

You could define a variable that represents all visible items by using as expression with a ng-repeat directive:
<div class="item"
ng-repeat='item in (collection | product_sex:filter_sex | product_stock: stockKind | filter:productFilter) as allVisibleItems'>
{{item.name}}
{{item.price}}
</div>
You could access this variable easily, right underneath ng-repeat for example:
<div ng-click="selectAll(allVisibleItems)">Select all Items</div>
More can be read here: https://docs.angularjs.org/api/ng/directive/ngRepeat

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>

Updating the limitTo value on a specific nested ngRepeat

I'm new to AngularJS and having to work on an app that has a section of nested ngRepeats such as this below.
<div class="title-bar" ng-repeat="orderType in someObj.orderTypes">
<div class="inner-panel" ng-repeat="status in orderType.statuses">
<p>{{status.Name}}</p>
<div class="order-list" ng-repeat="order in status.Orders | limitTo:orderFilterLimit">
<p>{{order.Stuff}}</p>
</div>
<button ng-show="(status.Orders.length > orderFilterLimit)" ng-click="loadMoreOrdersToList()">Load More</button>
</div>
</div>
The status.Orders list can be quite large at times so I limit it. When a user wants to view more data for that specific section (which is enumerated by status) I add 3 to the orderFilterLimit. The problem is when I do this it is adding 3 to every single .order-list in the .inner-pannel element. Is there a way I can change the orderFilerLimit variable based on an id or class of the element it's attached to?
For context here is a super simple snippet of what loadMoreOrdersToList() is doing.
https://jsbin.com/vapucixesa/1/edit?js

No need of declare the orderFilterLimit inside controller, You should have scope variable inside ng-repeat itself so that it ng-repeat element will have separate copy of orderFilterLimit because ng-repeat create a child scope on each iteration.
Markup
<div class="title-bar" ng-repeat="orderType in someObj.orderTypes" ng-init="orderFilterLimit = 3">
<div class="inner-panel" ng-repeat="status in orderType.statuses">
<p>{{status.Name}}</p>
<div class="order-list" ng-repeat="order in status.Orders | limitTo:orderFilterLimit">
<p>{{order.Stuff}}</p>
</div>
<button ng-show="(status.Orders.length > orderFilterLimit)" ng-click="orderFilterLimit = orderFilterLimit + 3">Load More</button>
</div>
</div>

Filter inner ng-repeat based on index of outer ng-repeat

I am trying to get the index of parent ng-repeat and in inner ng-repeat filter the data based of that.
Trying to use the below code but it is not working.
<div class="boxStyle" ng-repeat="priorityItem in priorityBox" data-tasktype= '{{$index+1}}' ui-drop-listener='dropListener' data-model='someArrays' > {{priorityItem.name}}
<div ui-draggable ng-repeat="item in someArrays | filter: {tasktype: "+ '{{$parent.$index}}' +" | orderBy: 'priority'" data-index='{{$index}}' data-taskid='{{item.taskid}}' data-priority='{{item.priority}}' class='btn btn-info btn-block'>{{item.name}}
</div>
</div>

Here is a plunker that does the job. It is not pretty because it duplicates the $index in order to make it easily accessible from the inner ng-repeat.
I would introduce a new custom filter to do the job.
This is the line that introduces a new variable which stores the parent index:
<div ng-init="parentIndex = $index"></div>
Good luck.

Sorting data in ng-repeat angular js

I am trying to sort data using orderBy in angular js, but it is not sorting data.
can any one help me out ?
please check fiddle
I am using following code
<div ng-controller = "fessCntrl">
<div ng-repeat="person in data | orderBy:person.order">
{{data.indexOf(person)}}
{{person.name}}
{{person.order}}
</div>
</div>

Two small changes, remove person, and add quotes
<div ng-repeat="person in data | orderBy:'order'">

Try the following:
<div ng-controller = "fessCntrl">
<div ng-repeat="person in data | orderBy:'order'">
{{data.indexOf(person)}}
{{person.name}}
{{person.order}}
</div>
</div>
I hope this helps!

You need to put your parameter in single quotes as you are passing it to the filter function. 'param', and also since you are already iterating the object, just the property name is sufficient.
<div ng-controller = "fessCntrl">
<div ng-repeat="person in data | orderBy:'order'">
{{data.indexOf(person)}}
{{person.name}}
{{person.order}}
</div>
</div>