I'm getting two items back from my API, one has a startDate and one has an endDate and I was wondering if it's possible to order them by their parameter string?
Data:
[
{
name: "Item 1",
type: "Start Time"
},
{
name: "Item 2",
type: "End Time"
}
]
Something like so:
<li ng-repeat="item in items | orderBy: type='Start Time'">{{ item.name }}</li>
Is is possible using Angular's orderBy filter?
Any help is appreciated.
No need to specify StartTime,
<li ng-repeat="item in items | orderBy: 'type'>{{ item.name }}</li>
Here is the working Application
You only need to specify the key by which you want to order in your orderBy:
orderBy: 'type'
And if you want to reverse the order use -:
orderBy: '-type'
Related
I am trying to filter an array (list) of repeated objects, based on the value of one of the property. However I keep getting [filter: not array] error. Screenshot of the error:
angular error message
I have also tried adding this angular toArrayFIlter injector https://github.com/petebacondarwin/angular-toArrayFilter however, the error still pops out.
Any help is much appreciated!
My array:
var orders = [
{
"assignedBy": "system",
"serviceDate":"2017-11-13",
"serviceStartTime":"04:00 PM"
},
{
"assignedBy": "system",
"serviceDate":"2017-11-13",
"serviceStartTime":"07:00 AM"
}];
html
<ul ng-repeat="task in orders track by $index | filter: { serviceStartTime: '04:00 PM' }">
<li >
<p>{{task.serviceDate}}</p>
<p>{{task.serviceStartTime}}</p>
</li>
</ul>
You'll need to filter the array before iterating it, like this:
<ul ng-repeat="task in (orders | filter: { serviceStartTime: '04:00 PM' }) track by $index ">
Please forgive the title. I couldn't figure out how best to describe what I'm looking for.
My JSON looks something like this:
AvailableColumns: [
{ ColumnName: "CustomerNumber", ... },
{ ColumnName: "CustomerFirstName", ... }
],
AvailableSummaryColumns: [
{
ColumnName: "CustomerNumber",
CalculationTypes: [
{ label: "Count", id: 1 },
{ label: "Count Distinct", id: 2 }
]
},
{
ColumnName: "CustomerFirstName",
CalculationTypes: [
{ label: "Count", id: 1 },
{ label: "Count Distinct", id: 2 }
]
}
]
I have a directive that walks through the parent of this object and binds to the data inside, no problem. The issue I'm having, though, is that I need to bind ng-options of a select to a filtered object by ColumnName.
Within my ng-repeat, I'm rendering a select housing the CalculationTypes for each column. I need my ng-options to be set to each of the CalculationTypes where AvailableSummaryColumns.ColumnName is equal to ColumnName of the current AvailableColumns object in my ng-repeat.
I've tried everything I know to try, but just can't get this bound properly. What's the best way to achieve this?
ng-repeat:
<tr ng-repeat="column in AvailableColumns track by $index | orderBy: 'ColumnOrder'" data-column-name="{{column.ColumnName}}" data-ref="{{$index}}">
Within each row, I need the ng-model or ng-options of a selectto be bound to AvailableSummaryColumns.CalculationTypes where AvailableSummaryColumns.ColumnName is equal to AvailableColumns.ColumnName.
Try this:
<tr ng-repeat="column in AvailableColumns track by $index | orderBy: 'ColumnOrder'" data-column-name="{{column.ColumnName}}" data-ref="{{$index}}">
<td><div ng-repeat="sumary in AvailableSummaryColumns track by $index">
<div ng-if="sumary.ColumnName === column.ColumnName">
<select ng-options="type.label for type in AvailableSummaryColumns. CalculationTypes"></select>
</div>
</div>
</td>
</tr>
I am trying to achieve this view here. From what I have it works great until an event occurs the next day, then the time order doesn't work, and also the events from next day are displayed after the one occurred previously. I'm using angular.filter to group my results
MyController
$scope.histories = response.revision_history.map(function (data) {
return {
"date": data.created_at.substring(0,10),
"time": data.created_at.substring(11,19),
"user": data.user_id,
"property": data.key,
"old": data.old_value,
"new": data.new_value
}
});
Jade
.col-md-12(ng-repeat="history in histories | groupBy: 'date' | toArray: true")
.crm-history-seperator
span {{ history[0].date }}
.repeater(ng-repeat="event in history | groupBy: 'time' | toArray: true")
span.time {{ event[0].time }}
.repeater(ng-repeat="ev in event")
.content
.activity
span.user {{ ev.user }}
span.explanation Changed {{ ev.property }}
span.explanation(ng-if="ev.old !== null") from
span.event(ng-if="ev.old !== null") {{ ev.old }}
span.explanation to
span.event {{ ev.new }}
Here is what I get if some event happens the next day
Here is what I want to achieve
From what I've concluded, order by is not working in your case. I think your answer lies between the way groupBy and orderBy expects arguments. Have a look at below answer.
https://github.com/a8m/angular-filter/issues/57#issuecomment-65041792
I have a problem when the attribute of the object does not exist and I can not filter using "!null", I wonder if filter can validate this or i need to create a new filter for this.
Html ng-repeat
<li ng-repeat="detail in details | filter:{shortDescription: '!null'}">
<p>{{detail.name}}</p>
</li>
JavaScript Array
$scope.details = [{
name: 'Bill',
shortDescription: null
},{
name: 'Bill2',
}, {
name: 'Sally',
shortDescription: 'A girl'
}];
Result
Bill2
Sally
Bill2 have no exist shortDescription but not filter.
expected Result:
Sally
JSFiddle
http://jsfiddle.net/4wxs67yv/28/
AngularJS v.1.3.15
How i can do this?
You could try using double not operator,as
<li ng-repeat="detail in details | filter:{shortDescription: '!!'}">
<p>{{detail.name}}</p>
just started Angularjs, I have a simple application where orderBy is not working. What is wrong here?
<body ng-init="names=['Ruby','Java','Oracle','Basic']">
<input type="text" data-ng-model="name"/>
<ul>
<li ng-repeat="name in names | orderBy:'name' | filter:name">{{name | uppercase}}</li>
</ul>
<script type="text/javascript" src="js/angular.js"></script>
</body>
The orderBy filter will order an array of objects by a property within each member of the array. So if you say orderBy: 'name' then each member of the array should have a property called name in it. In your array there are no properties of name because your array contains Strings not Objects. If your array looked like:
names = [ { name: 'Ruby' }, { name: 'Java' }, { name: 'Oracle' }, { name: 'Basic'} ]
Then it'd work. Or you can change orderBy: 'name' to orderBy like so:
<li ng-repeat="name in names | orderBy | filter:name">{{name | uppercase}}</li>
Then it won't use a property of the member to order by and instead use the value of each member to order the array which is what you want with Strings.
The orderBy only works with arrays of objects -- See http://docs.angularjs.org/api/ng.filter:orderBy
I made a JSfiddle for you
http://jsfiddle.net/aBccw/
$scope.names =[{name:'Ruby'}, {name:'test'},{name:'Oracle'},{name:'Basic'}];
Hope it helps
Answering my own question. Removed single quote from name and it started working. But not sure if I should stop using quotes?
<li ng-repeat="name in names | orderBy:name | filter:name">{{name | uppercase}}</li>