I thought that is using the orderby filter in angular, we could simply reverse by adding a "-" before that which you want to order by. So in my case in the code below, why would this not work? I have tried with the "-" in and out of the single quotes.
Code:
<tr class="alertText" ng-repeat="swipe in ppt.Swipes | orderBy:'-swipe.date' ">
<td>{{swipe.date|date : 'MM/dd/yyyy'}}</td>
<td>{{swipe.descr}}</td>
<td>{{swipe.amount | currency}}</td>
<td>{{swipe.dueDate|date : 'MM/dd/yyyy'}}</td>
<td>{{swipe.status}}</td>
<td class="clearIcon"><span ng-click="editSwipe()"><img src="ppt/assets/toolIcons/clearswipe-small.svg"></span></td>
</tr>
orderBy:'-date' is enought for ordering
You should have the property as '-date' in the ng-repeat in the filter ,
Code:
<div ng-repeat="card in myCards | orderBy:'-date'">
<businesscard>{{card.firstName}} {{card.date | date}}</businesscard>
</div>
Here is the working jsfiddle
function Main($scope) {
$scope.items = [
{"name":"ali",date: new Date('12/23/2013')}
,{"name":"Reza",date: new Date('12/23/2015')},
{"name":"Amir",date: new Date('12/23/2011')}
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="Main">
<div ng-repeat="item in items | orderBy:'-date'">{{item.name}}: {{item.date | date}}</div>
</div>
</div>
And don't forget than you can use second parameter of orderBy filter to set sort order:
<tr class="alertText" ng-repeat="swipe in ppt.Swipes | orderBy:'date':1">
Related
I have the array of object but I don't know how to group by the id as order. I want to show it numerical order like 1,2,3 using ng-repeat
$scope.arrayofobject=[{name:"testMachne","id":1},{name:"testComputer","id":2},{name:"testCalc","id":3},{name:"testMac","id":2},{name:"testMachne","id":3},{name:"testMachne","id":1}]
You can use the orderBy filter:
angular.module('app',[]).controller('mainCtrl', function($scope){
$scope.arrayofobject=[{name:"testMachne","id":1},{name:"testComputer","id":2},{name:"testCalc","id":3},{name:"testMac","id":2},{name:"testMachne","id":3},{name:"testMachne","id":1}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='mainCtrl'>
<div ng-repeat="json in arrayofobject | orderBy:'id' " ng-if='json.id !== 1'>
{{json.name}}
</div>
</div>
I am trying to use a filter with an expression in ng-repeat like this -
<div ng-repeat= "fruit in fruits | filter: {fruit.color !: 'red'}">
{{ fruit }}
</div>
But it doesn't seem to work, can someone confirm that it is possible to use expression in filters(I am using angular 1.0.8)
First thing you should upgrade you Angular Version to latest, it would not make sense to stay with Angular 1.0.x
<div ng-repeat= "fruit in fruits | filter: {color : '!' + selected Color}">
{{ fruit }}
</div>
This is just example of filter in ng-repeat:
<div ng-repeat= "fruit in fruits" >
{{ fruit | uppercase}}
</div>
$scope.fruits = ['apple','banana']
OutPut:
APPLE
BANANA
I have a an array of objects like this in angular:
$scope.data = [
{name:"John", group:"a"},
{name:"David", group:"a"},
{name:"Tom", group:"b"},
];
I want to present this data as something like this (in a template):
<h2>group a</h2>
John<br/>
David<br/>
<h2>groub b</h2>
Tom<br>
How would you suggest to do this? How can I go from the structure at the beginning to the structure at the end?
You could use grouby filter that would do group for you on basis of group property
Markup
<div ng-repeat="(key, value) in data | groupBy: 'group'">
<h1>group {{ key }}</h1>
<div ng-repeat="person in value">
{{ person.name }}
</div>
</div>
I have created a scope function like this
$scope.sample = [
{'SUPNAME':'AAA','SUPCODE':'22671','SLIPNO':'18384','DESG':'1','iv':'1'},
{'SUPNAME':'AAA','SUPCODE':'22671','SLIPNO':'18384','DESG':'2','iv':'2'},
{'SUPNAME':'AAA','SUPCODE':'22671','SLIPNO':'18384','DESG':'3','iv':'3'},
{'SUPNAME':'BBB','SUPCODE':'24603','SLIPNO':'26714','DESG':'1','iv':'4'},
{'SUPNAME':'BBB','SUPCODE':'24603','SLIPNO':'26714','DESG':'2','iv':'5'},
{'SUPNAME':'BBB','SUPCODE':'24603','SLIPNO':'26714','DESG':'3','iv':'6'},
]
I have to display by grouping with same SUPNAME,SUPCODE,SLIPNO. For example I have to display it like this.
SUPNAME:AAA SUPCODE=22671
DESG 1 DESG2 DESG 3
SUPNAME:BBB SUPCODE=24603
DESG 1 DESG2 DESG 3
So how can I create ng-repeat for this..Kindly give some solution.
i tried to create a Codepen for your case
grouped Codepen
<table class="table table-striped">
<tr><td>{{data1}}</td><td>{{data2}}</td></tr>
<tr ng-repeat="item in filteredsample = (sample | filter:{ SUPNAME: 'AAA'})">
</tr>
<ul ng-repeat="thing in filteredsample">
<li style = "float:left; margin:20px">DESG VALUE {{$index}} = {{thing.DESG}}</li>
</ul>
</div>
Hope this helps
If I write twice the same directive as attribute, I get twice the result, but when I write it twice as element, I only get the result once, why?
I have a very simple directive:
.directive("ngMyText", function(){
return {
restrict: 'AE'
};
})
An $scope with a collection of items:
$scope.items = [
{ text:"AAA", show:true },
{ text:"BBB", show:true }
];
Therefore, when doing this:
<div ng-controller="myController">
<div class="container">
<div data-ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text"></div>
<div data-ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text"></div>
</div>
<div class="container">
<ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text" />
<ng-my-text ng-repeat="item in items | filter:{show:true}" ng-bind="item.text" />
</div>
</div>
I would expect to get the collection rendered twice in each container, but in the second container only happens once. Why does this happen?
I have created an runable example with the problem: http://jsfiddle.net/vtortola/mzAPk/
Cheers.
See Are (non-void) self-closing tags valid in HTML5? This
<ng-my-text ng-repeat="item in items | filter:{show:true}"
ng-bind="item.text" />
should be
<ng-my-text ng-repeat="item in items | filter:{show:true}"
ng-bind="item.text"></ng-my-text>