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>
Related
I have this ui select:
<ui-select multiple
ng-model="meas.daysSelected"
theme="bootstrap"
close-on-select="false">
<ui-select-match placeholder="days">{{$item}}</ui-select-match>
<ui-select-choices repeat="day in days | filter:$select.search">
<div ng-bind-html="day | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
$scop.days = ['Sun', 'Mon', 'Tue' ... ]
it is in a simple table with angular ng-repeat
<tr ng-repeat="meas in foo= (res.foos | filter: subSearch : strict)">
and I filter it with:
<input type="text" class="form-control" ng-model="subSearch.daysSelected">
The problem is like this: the "daySelected" model is becoming an array when I select an object and then de-select it. the filter of angular just dismisses it and filters it.
So I need help in one of the 2:
make daySelected as a string (when selected it will be: "sun, mon"
or
adjust the filter to work in array
Assuming the search text is going to be like "Mon,Tue" which will filter all the ui-selects which have ["Mon","Tue"] you can write your own filter function and pass that. For example:
<tr ng-repeat="meas in foo= (res.foos | filter: $ctrl.filterDaysSelected">
And in your controller you'd need to create that function:
$ctrl.filterDaysSelected = function(value, index, array) {}
Where you would need to:
Split the value of your search criteria by ","
Validate that each item in your split array exists in the function value parameter
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 ">
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'
I have created a Angular Select box for countries. My array looks like this:
AD: "Andorra"
AE: "United Arab Emirates"
AF: "Afghanistan"
AG: "Antigua and Barbuda"
AI: "Anguilla"
And my NgRepeater looks like this
<li nya-bs-option="(k, v) in fields.country.available" data-value="v" data-label="{{v}}">
As you can see, The 'Key' is automatically getting alphabetically arrange in order. However I wish for the 'Value' to be arranged in alphabetical order. I have tried:
<li nya-bs-option="(k, v) in fields.country.available | orderBy:'v'" data-value="v" data-label="{{v}}">
But this didn't work. Can anyone help?
Your array seems more like an object as far as I can see from <key>:<value> structure. In this case you would need to write an own filter for orderBy because angular cannot sort object keys with this filter.
See also: Order by Object key in ng-repeat
Despite of the solution in the thread above, I would suggest to use another structure for the countries if possible:
[{id: 'AD', name: 'Andorra'}, ...]
Then you can do this in ng-repeat:
country in fields.country.available | orderBy: 'id'
I have solved it. And by doing this way, the countries are automatically put into alphabetical order :)
HTML:
<ol class="nya-bs-select" ng-model="data.ship.country" name="ship_{{fields.country.slug}}">
<li nya-bs-option="v in sortable" data-value="v[0]">
<a>{{v[1]}}</a>
</li>
</ol>
Controller:
var countries = fields.country.available,
sortable = [];
for (var country in countries){
sortable.push([country, countries[country]]);
}
sortable.sort(function(a, b) {
return a[1] - b[1]
});
$scope.sortable = sortable;
I am new to angular js so please forgive me for this basic question.
I have an array of object literals and I want to add filter in angular js according to particular field type.
Array of object literals:
var todos= [{text: 'To-DO1', done: false,group:'Group1' }, {text: 'To-do2', done: false, group:'Group2' } ];
I am using this code:
<select data-ng-model="selectOption" data-ng-options="item as item.gtype for item in items"> </select>
<li data-ng-repeat="todo in todos track by $index | filter: selectOption.gtype ">
Above filter is not working
For populating the select I am using :
$scope.items = [
{gtype:'Group1'},
{gtype:'Group2'},`enter code here`
{gtype:'Group3'},
{gtype:'Group4'},
{gtype:'Group5'}
];
Could someone please help me through ?
The problem is with the track by $index. The correct place for it is at the end of the expression, after the filter (see ngRepeat documentation)...
<li data-ng-repeat="todo in todos | filter: selectOption.gtype track by $index">
Live Demo
Edit: As requested, here's an updated fiddle to show an alternate message if filter produces nothing...
Live Demo