<div ng-repeat="user in users | orderBy:'-type'">
<p>{{user.name}}</p>
<p>{{user.type}}</p>
</div>
I have type : 12, 5, 3
I want to give higher precedence to 12 then 3 move 5 to end of line
Can you try this hope this will help you
You need to add group filter
<ul ng-repeat="(key, value) in countries | orderBy: 'status' | groupBy: 'status'">
Status : {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
See below jsfiddle
https://jsfiddle.net/cojtn8vm/6/
You need to sort the collection yourself before repeating it or you need to convert user.type to string and then you can use like given below link
[1]: https://jsfiddle.net/kinjalpgor/cojtn8vmenter code here
Related
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:'!'+test">
{{ x }}
</li>
</ul>
How to display all the items in list initially and then exclude the items as i type? Initially, none of the items are displayed. Only after i type something in textbox, it displays the items excluding the one which i typed.
You are missing angularjs strict:true operator in filters
this is what you need
<li ng-repeat="x in names | filter:'!'+test:true">
{{ x }}
</li>
Plnkr
On top of my head setting an initial value in model $scope.test = '' should resolve the issue for you.
No need of this '!' ,you just have to pass ng-model value
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
I am trying to sort the shop titles in alphabetical order right now the data is showing randomly. I am adding the fiddle of that: https://jsfiddle.net/jtdk157s/
enter code here
User the filter OrderBy and specify the property of the Object:
ng-repeat="item in groupedData | filter:categoryFilter | orderBy:['node.location','node.title']
Check working sample:
https://jsfiddle.net/bLvLy1sh/1/
With groupBy filter
<div ng-repeat="(key, items) in groupedData | groupBy: 'node.location' )">
<h2>{{key}}</h2>
<ul>
<li ng-repeat="location in items">
{{ location}}
</li>
</ul>
</div>
Using angular.filter i am using groupBy and length to give me a count of the number of records logged by the user emailId
<div ng-repeat="(key, value) in leaderboard | groupBy: 'emailId'">
<h3>{{ key }} {{ filteredList.length}}</h3>
<li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
</div>
This all works fine giving me a list of emailIds, the number of records for each emailId and the records listed underneath.
What I a trying to do is to order the data by the number of records for each emailId (in other words order the data by the value returned by {{ filteredList.length}}).
I have tried adding orderBy to the ng-repeat as below
<div ng-repeat="(key, value) in leaderboard | groupBy: 'emailId' | orderBy: filtered.length">
<h3>{{ key }} {{ filteredList.length}}</h3>
<li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
</div>
but this does not make any difference to the order the items are listed. I have had a look for an existing answer but all of the orderBy not working with groupBy seem to refer to ordering by an item contained in the value not the length of the filter.
the user group of angular-filter have written what needs to be done at below link:
https://github.com/a8m/angular-filter/issues/57#issuecomment-65041792
groupBy returns an object but orderBy fiter expects an array. So use toArray:true and give orderBy an array to work with.
Below is the code that must work:
<div ng-repeat="(key, value) in leaderboard | groupBy: 'emailId' | toArray: true |orderBy: filtered.length">
<h3>{{ key }} {{ filteredList.length}}</h3>
<li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
</div>
Also, keep in mind that orderBy must be the last filter in the chaining.
Edit
You can also switch places of orderBy and groupBy. If OrderBy filter is in the first place it sorts and after that groupBy filter initializes without toArray filter
Example:
<div ng-repeat="(key, value) in array | orderBy: filtered.length | groupBy: 'emailId'">
<h3>{{ key }} {{ filteredList.length}}</h3>
<li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
</div>
This can easily be fixed by just ordering first then grouping. Much better performance.
<div ng-repeat="(key, value) in leaderboard | orderBy: filtered.length" | groupBy: 'emailId'>
<h3>{{ key }} {{ filteredList.length}}</h3>
<li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
</div>
I need to apply a filter on ng-repeat that does not hide the no matching items but it will apply them a custom style for example different color.
<ul ng-repeat="friend in friends | filter:query">
<li>{{friend.name}}</li>
</ul>
So when i apply the filter i need to see all the names but the filtered ones with different color.
You could use ng-class to do what you want, and get rid of the filter part. Example:
<ul ng-repeat="friend in friends">
<li ng-class="friend.name.indexOf('Billy') >= 0 ? 'match' : 'no-match'">
{{ friend.name }}
</li>
</ul>
You can easily make the search part dynamic, but query would just be a simple string to test against:
<ul ng-repeat="friend in friends">
<li ng-class="friend.name.indexOf(query) >= 0 ? 'match' : 'no-match'">
{{ friend.name }}
</li>
</ul>
This is just one example. Without any other details about your query I can't completely answer your problem.
I'm a beginner in AngularJs. I'm trying to filter data, using a dropdown menu, by only one field :
<select ng-model="annee" ng-options="annee.titre for annee in annees track by annee.id">
</select>
<ul>
<li ng-repeat="x in accueils | filter:annee" >
{{x.titre}}
<div ng-bind-html="x.description | to_trusted"></div>
{{x.date}}
{{x.cout}} $
{{x.participants}} participants
</li>
</ul>
In each x, there is a field "annee", i want to filter by this field.
For a working example : http://plnkr.co/edit/MbfrhdKfbTObybsQvxrR?p=preview
Now the problem is, when i select an option in the dropdown, i lose all the data, the filter is not working.
Can you please help me ?
Thanks
Here is plunker
Things are going as in your select you are getting complete object selected:-
for example:-
if you select '2015-2016' you will get {"titre":"2015-2016","id":3} in $scope.annee.
So, in filter you need to search for filter:{annee:annee.id} that means look for the annee inside accueils having anneed.id(this is from model).
<li ng-repeat="x in accueils | filter:{annee:annee.id}" >
{{x.titre}}
<div ng-bind-html="x.description | to_trusted"></div>
{{x.date}}
{{x.cout}} $
{{x.participants}} participants
</li>