I'm a bit confused after reading Angular's orderBy documentation:
In HTML Template Binding:
{{ orderBy_expression | orderBy : array : expression : reverse}}`
This shows orderBy being used with 3 additional parameters (reverse is listed as optional), but I cannot find any examples of it being used with more than 2, and when it is 2, it appears to be in the form {{ orderBy_expression | orderBy : expression : reverse}} (ommitting array)
array is defined as "The array to sort.", but what does that make orderBy_expression? Shouldn't that be the array the filter acts upon?
I was actually going to Improve this doc and modify this (what I assume is a documentation error), but it wasn't at all clear to me what exactly was generating the template binding example (the docs are generated with JavaDoc-like comments right in the .js)
So, hopefully this is a valid SO question:
Is the documentation in fact incorrect? Or am I somehow confused
Filters have 2 modes of use. Programmatically, as a function, in which case the first param IS the array to act upon, and inline with | where the array on the left hand side is the array to act upon. So while it may not be immediately clear that is what is going on, the docs are not incorrect. Not saying it shouldn't be cleaned up. It would certainly be nicer if they showed both modes and clearly explained it. But I still stand by it being "correct." And, as Mikke pointed out, the current style of explanation IS consistent through the docs.
Related
Sometimes you need to ng-if or ng-show an item in html based on some choices made earlier. One of these for me is "Additional Item". You can enter one set of information, and also if you want, an additional set. This creates an array of 2 similar objects. With this setup, you can only have 1 or 2 objects in this array. (important, since the scope of this question needs to be limited this way)
I want to ng-show an html directive based on "myItemsArray.length > 1". Since the array can (read should) only be 1 or 2 in length (not 0), this should work. However, it does not, because AngularJS seems to be adding an item "proto" to the array which adds to the count. See the image.
The problem is, proto makes the array length equal 2. I am not going to just look for length > 2 because i really don't know if i can count on proto always being there, and i just think thats bad practice anyway.
Also, i know there are MANY other ways of doing this (setting a boolean, or using another var to indicate etc, but i really just want to work with count of items in the array because "business logic"..
EDIT:
After doing a little debugging, i'm seeing that i have an array of "Object, undefined". How is this even possible :)
Some search lead me to this. Why are some values in my array undefined
EDIT:
Seems that using a delete may cause this problem
In angular.js 1.0.7 orderBy filter used with predicate string '.' reverses the array order.
For example:
$filter('orderBy')(['a','b','c'], '.'); // -> ['c', 'b', 'a'].
How one can explain the logic of the transformation?
Upd. answer already found by myself below.
I cannot replicate using AngularJS 1.2.16. With a simple app the orderBy makes no modification to the input set:
Normal Order
a
b
c
d
e
Reverse Order
a
b
c
d
e
PLUNKER EXAMPLE: http://embed.plnkr.co/jn8PHVrgUHqAYjApWMKd
Note that the controller also includes a commented statement that changes the order of $scope.abc to not follow natural ordering. Even with this change, there's no effect on the output.
For more info you can look through the source of orderBy too: https://github.com/angular/angular.js/blob/master/src/ng/filter/orderBy.js#L78
playing around a little
<ul>
<li ng-repeat="i in abc | orderBy:'.'">{{i}}</li>
</ul>
<ul>
<li ng-repeat="i in abc | orderBy">{{i}}</li>
</ul>
this does the trick, it has something to do with the expression and the fact that the array has primitive values. not sure why
So I finally found a sane explanation to my question, which was pretty simple, why this awkward behavior happens, not how it's meant or supposed to be written, or kinda things. I just debugged the source code calls in dev tools withing angular step by step and it turns out to be this:
So it turns out that due to specificity of parsing mechanism in angular, '.' is eventually considered to be in this case a NaN and inside the sorting function of an array the last return v1 < v2 ? -1 : 1; defaults to false and we get 'return 1' which reverses our array order constantly.
You can yourself try [1,2,3].sort(function(a, b){return 1;}), the output will be [3,2,1].
Bingo.
Upd: in current version of angular there is a correctly thrown error on such behavior:
Error: $parse:syntax : Token '.' not a primary expression at column 1 of the expression [.] starting at [].
How can I compare two scope values using angularjs in HTML only?
for example:
<div ng-if="place.id = place.reference.id"> show if equals</div>
I want this to cover certain scanrios
You are assigning something this way...
To check for equality you need == or ===, but 3 should be used as Doug says -
"If there is every anything that causes unwanted effects and can be
solved by something else, use the something else..."
Ok maybe he didnt say that exactly but you get the point....
<div ng-if="place.id === place.reference.id"> show if equals</div>
In the AngularJS doc for "orderBy", the description of the "string" property is as follows (with my emphasis):
An Angular expression which evaluates to an object to order by, such as 'name' to sort by a property called 'name'. Optionally prefixed with + or - to control ascending or descending sort order (for example, +name or -name).
The description of the "reverse" property is as follows:
Reverse the order the array.
So what should be the difference between using "-property" and "reverse"? Should both of these do the same thing?
For my test case, I can't get "reverse" to do anything. I constructed a plunkr with three ngRepeats. The first one is without any ordering, the second one ordered with "reverse", and the last ordered with "-property". The latter does what I expect, the former doesn't appear to do anything.
The documentation is clearly ambiguous, but I would have expected "reverse" and "-property" to do the same thing. What's going on here?
Looking at the manual you'll find reverse to be of type boolean. Which indicates that it's value will be looked up in the current scope or is meant to be literal. Simply plucking in reverse will then evaluate to undefined (because it's probably not defined on the scope) which is falsy and thus reverse has no effect. Use a scope value or a litteral (true, false) to see it's effect.
The reason to have two ways of reversing the sort order is because it's hard to to change the +/- through data-binding techniques, while it's easy to simply refer to a scope variable using the reverse expression. And thus change the order through data-binding (e.g. button clicks which change a scope variable, which is actually an example on the manual page).
Instead of orderBy:'lastRun':reverse put quotes around 'reverse': orderBy:'lastRun':'reverse'
I have a few questions buzzing in my head about the comprehension expression:
What is the data structure which it defines?
Was it adapted from some other language?
Where is it used in AngularJS? Does this API exist for select elements only?
From the docs:
ngOptions - comprehension_expression - in one of the following forms:
for array data sources:
label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr
for object data sources:
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in object
Comprehension expression is just a string formatted in a special way to be recognized by select directive.
There's no magic behind it, just several formats of it because there are quite a few ways to process and represent your collection (data structure of your model, item/item property selection as scope's model, some other options regarding labels, grouping etc.). When you consider all these options it is not that strange for allowing complex expressions.
Let's say you have such code:
<select
ng-model="color"
ng-options="c.name group by c.shade for c in colors"></select>
In order to ditch the comprehension expression and use attributes, you would write something like this:
<select
ng-model="color"
ng-data-type="object"
ng-data="colors"
ng-select="c"
ng-label="c.name"
ng-group-by="c.shade"></select>
The attribute approach might get ugly once you expand your API. Besides, with comprehension expression it's much easier to use filters.
While in one way it's true to say that a "comprehension_expression" is "just a string" as package says, on the other hand, source code is just a string. Programming languages are just strings.
A SQL SELECT statement
– which could very well be part of the inspiration for the syntax and features of the "comprehension_expression" (but it's not obvious that it is, because it's not mentioned in the docs– perhaps if I dug into some developer conversations I might be able to find out) –
is just a string.
Sure they're just strings, but they have structure, which relates to the problem they are trying to solve. And the question is, is the structure adequately described? Is its pattern, how it relates to the problem at hand, made clear? Is its relationship to other structures that other people have designed apparent?
While the "comprehension_expression" is just a string, on the other hand, its complexity almost comes to it being a sort of sub-language in its own right.
But the way it is portrayed in the docs (https://docs.angularjs.org/api/ng/directive/ngOptions) does reflect the attitude that it is "just a string with some formatting". It is tucked away in the documentation for ng-options as the type of the ng-options directive. To some extent, it is not an entity in its own right, it is a second-class citizen.
The way the different formats are listed can give one a strange feeling, like it's sort of ad-hoc, without any pattern relating the different possible formats (although there is a pattern if you look closely). Without a formal grammar with a regular structure, it makes you wonder if they really covered all the possible options. Compared to, say, the MySQL documentation for the SQL SELECT statement: https://dev.mysql.com/doc/refman/5.7/en/select.html
Obviously such formal syntax can be quite intimidating and is maybe not necessary for the case of the "comprehension_expression", on the other hand it can be reassuring to know it is precisely defined.
I suspect the asker of the question was somewhat unsettled by how casually the "comprehension_expression" was mentioned in the docs; it can seem like a sort of floating, ghost-like entity, just mentioned briefly but not given its own page etc.
It might be worth it having its own page, being treated as an entity in its own right, because then that invites discussion as to the design of this "sub-language". How did it come about? What are the reasons for the different features of the "sub-language"? Which features, and thus syntaxes, conflict with each other? Why can this feature be used together with that feature but not another feature? Are there inspirations from e.g. SQL, in the design of this "sub-language"?
Otherwise it seems to be an invention out of the blue, unrelated to other DSLs of its kind.
In a blog post on ng-options,
https://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/
Mr. Shidhin links to a little discussion
https://groups.google.com/forum/#!topic/angular/4EDe8xIbjLU
Where just this issue is discussed. "Matt Hughes" also expresses the opinion that "Seems like a lot of additional complexity for one directive."
Perhaps this is not that big a deal. I just wanted to put it out there though.