angular orderBy multiple fields has syntax errors - angularjs

I am trying to use angular orderBy to order multiple fields, but i get syntax error as:
Syntax error, unrecognized expression: div[ng-repeat='r in
vm.GetRequests() | filter: vm.SearchText |
orderBy:['LastName','FirstName']']
It seems there appears additional sign ']', but i do not have it in html
The html looks like:
<div ng-repeat="r in vm.GetRequests() | filter: vm.SearchText |orderBy:'RequestedOn'| orderBy:['LastName','FirstName']">
{{r.LastName}} : {{r.FirstName}}
</div>
the function GetRequests() returns a array of object as following:
[{FirstName:"Test1", LastName:"First"},{FirstName:"Test2",LastName:"Second"},{FirstName:"Test3",LastName:"Third"}]
Can anyone help me for the problem?
Changing HTM - remove orderBy: 'RequestedOn'
<div ng-repeat="r in vm.GetRequests() | filter: vm.SearchText | orderBy:['LastName','FirstName']">
{{r.LastName}} : {{r.FirstName}}
</div>
but i still get syntax error:
Uncaught Error: Syntax error, unrecognized expression: div[ng-repeat='r in vm.GetRequests() | filter: vm.SearchText | orderBy:['LastName','FirstName']']
UPDATE
The syntax seems comes from a browserlink, because the order works goed when i get the error.
And recommend to put all order property in a array
Thanks a lot for the inputs all of you, especially thanks for RishiPrakash :)

I think that filter only works on arrays and doesn't evaluate functions.
I would assign the request to a scope variable in the controller:
js:
$scope.requests = vm.GetRequests();
html:
<div ng-repeat="r in requests | filter: vm.SearchText | orderBy:['RequestedOn','LastName','FirstName']"> {{r.FirstName }}, {{r.LastName}} </div>
note: I don't think there's a problem with the way you sort your array, although I prefer combining them in one orderBy expression as Rishi Prakash suggested.

try <div ng-repeat="r in vm.GetRequests() | filter: vm.SearchText() | orderBy:['RequestedOn','LastName','FirstName']">
filter:vm.SearhText must be a function so () in end of it.

Related

Angular ng-repeat filter: ¿How to specify filter fields?

Ok, looks easy, but not.
I want to perform a simply angular filter, but i need to specify which fields of my array use in filter.
A Basic filter is:
<li ng-repeat="person in app.people | filter: app.search">
A One-Field filter is:
<li ng-repeat="person in app.people | filter: {Surname: app.search}">
How can i specify more than one field for filter?
Something like:
<li ng-repeat="person in app.people | filter: {Name,Surname: app.search}">
Here a Plunker with Basic Filter and One-Field filter: https://jsfiddle.net/odLz1v71/3/
In this case, I would suggest you add a filter function in your controller like this:
vm.searchFilter = function(item){
// Add your own search logic here
return item.Name.includes(vm.search) || item.Surname.includes(vm.search);
}
And then use it like this:
<li ng-repeat="person in app.people | filter: app.searchFilter">
I don't think you can do this with the basic filter directly, but you can provide a function for the filter filter to use that will do this check for you:
vm.checkName = function (value) {
return value.Name.indexOf(vm.search) > -1 || value.Surname.indexOf(vm.search) > -1;
};
See: https://jsfiddle.net/odLz1v71/4/

Is Angular ng-repeat filter result accessible?

I am successfully using ng-repeat and its filter and orderBy functions
<div ng-repeat="center in centers | filter: subjectName | orderBy:[\'name\',\'parent']">'
However when user decides to print/download the "centers" filtered and ordered by angular, the printing method fails because it knows only the original unsorted unfilterd array. Is there a way to capture the object resulted by the filtered/orderBy angular methods so I could use it directly in my printing method?
<div ng-repeat="center in centers | filter: subjectName | orderBy:[\'name\',\'parent']">'
'<span>{{center.name}</span>'+
</div>
....
// what I have so far
<li><a ng-click="print(centers)"><span class="glyphicon glyphicon-print"></span> Print All </a></li>
...
// what I would like to have
...
<li><a ng-click="print(filteredOrderedObject)"><span class="glyphicon glyphicon-print"></span> Print All </a></li>
...
// what I have
scope.print = function(ocw) {
//printing
}
// what I would like to have
scope.print = function(filteredOrderedObject) {
//printing
}
You can use the $filter service directly in your code. Something like this.
var filtered = $filter('filter')(centers, subjectName);
filtered = $filter('orderBy')(filtered, ['name', 'parent']);
https://docs.angularjs.org/api/ng/filter/filter
You can use $eval to evaluate expression in controller.
Following is the syntax
$scope.centers = $scope.$eval("center in centers | filter: subjectName | orderBy:[\'name\',\'parent']");

OrderBy gets ignored

I have the following ng-repeat:
<div ng-repeat="location in truckDetail.locations track by $index | orderBy:location.startDate" class="locationLoopRow">
<span class="rowEdit"><i ng-click="location.editMode=!location.editMode" class="fa {{location.editMode?'fa-ban':'fa-pencil'}}"></i></span>
<span class="rowDate">{{location.startDate|date:'dd.MM.yyyy'}}</span>
<span class="rowDate">{{location.endDate|date:'dd.MM.yyyy'}}</span>
<span class="rowLocation">{{location.name}}</span>
</div>
The orderBy seems to be ignored completely as seen in the screenshot.
I also tried to solve this by using a sort-function:
| orderBy:dateOrderBy(location.startDate)
$scope.dateOrderBy=function(date) {
return date.getFullYear()+'/'+date.getMonth()+'/'+date.getDate();
},
In debug mode I can see that this message returns values like '2015/4/29'. Still: The list isn't sorted at all
You don't need to call dateOrderBy function in ng-repeat, you only need to specify it's name:
| orderBy:dateOrderBy
Then in your controller your sort function will receive the location object:
$scope.dateOrderBy = function(location) {
return location.startDate;
};
Example in plunkr.
UPD: this one should work as well:
| orderBy:'startDate'
UPD 2: track by $index should always go in the end of expression:
location in truckDetail.locations | orderBy:'startDate' track by $index

pagination directive does not give me filtered data

Hi I am using this pagination directive. : https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
I am facing issue over getting filtered data.
we use ng-repeat to get filtered data like this : so if I use sam object it will give me filtered data.
ng-repeat="s in sam =(groups.listingDescriptionData | filter: search) | limitTo: 10"
If i try to use like this with this directive then I am not getting filtered data :
dir-paginate="ldd in perman = (groups.listingDescriptionData | filter: search) | orderBy: sortingOrder | itemsPerPage: pageSize"
This is very specific to the above mentioned directive issue if anybody has any idea or faced any issue please suggest me some solutions.
I just tried to make sorting. You can look at example
<li dir-paginate="meal in meals | filter:q | orderBy: order?'key':'-key' | itemsPerPage: pageSize" current-page="currentPage">{{ meal.key + ': ' +meal.val }}</li>

Using JSON square bracket notation within Angular directives to access values

I have a JSON object that contains namespaces in some of its keys in the form of namespace:key. Because of this, I need to use the square bracket notation instead of the dot notation to access its value.
I am trying to use some angular directives/filters to work with the data, in this example I will be using filter, but the issue seems transversal to the use of bracket notation within the directives as well.
Here's my example:
ng-repeat with filter in HTML:
<ul>
<li ng-repeat="item in items | filter:{properties['namespace:status']}">
{{item.name}}
</li>
</ul>
$scope.items content:
{
"properties":{
"namespace:status":"A",
"name":"Potato",
// ...
},
// ...
},
{
"properties":{
"namespace:status":"B",
"name":"Carrot",
// ...
},
// ...
},
{
"properties":{
// Note that it doesn't contain the namespace attribute
"name":"Bean",
// ...
},
// ...
}
Expected rendered HTML:
<ul>
<li>Potato</li>
<li>Carrot</li>
</ul>
Actual outcome
Error: [$parse:syntax] Syntax Error: Token '[' is unexpected, expecting [:] at column X of the expression [items | filter:{properties['namespace:status']}] starting at [['namespace:status']}].
directing me to a syntax error.
My issue is that the same expression {{properties['namespace:status']}} does fits the syntax in templates, so I'm not sure I am doing something wrong, or if the directives simply can't handle the bracket notation.
If its the latter, any suggestions on how I could approach this without rewriting the JSON?
You should specify an object key like that
<ul>
<li ng-repeat="item in items | filter:{prop: properties['namespace:status']}">
{{item.name}}
</li>
</ul>
Here you can check http://codepen.io/anon/pen/BslpA
But you should know that angularjs can not filter by array of object properties, it can be only array.

Resources