Can someone please let me borrow your eyes for a second because this has to be some dumb little nuance I'm missing here...?
So as example, within an ng-repeat I pull out a value and throw an inline expression at it like this (in this example, just changing some text color based on how many days old the value is):
EDIT* - scope.item doesn't mean anything in particular, I just edited the verbiage a little to get rid of any identifying names for the sake of an internet example.
ng-class="{
'green-text':{{daysSinceToday(item.theItemDate) <= 20}},
'orange-text':{{daysSinceToday(item.theItemDate) > 20 && daysSinceToday(item.theItemDate) < 30}},
'red-text':{{daysSinceToday(item.theItemDate) >= 30}}
}">
Which works splendidly, except then when I'm outside of the scope of the ng-repeat and try something similar but using just [0] on the item index like you see, then I can still get the value to display, but it doesn't seem to care about the ng-class expressions at all and instead just grabs the first class listed in the ng-class no matter what the value is.
So if I do something like this OUTSIDE of the ng-repeat;
ng-class="{
'someclass':{{daysSinceToday(scope.item[0].theItemDate) <= 20}},
'anotherclass':{{daysSinceToday(scope.item[0].theItemDate) > 20 && daysSinceToday(scope.item[0].theItemDate) < 30}},
'yetanotherclass':{{daysSinceToday(scope.item[0].theItemDate) >= 30}}
}">
It just doesn't seem to care, which is weird because if I just put it in there raw like;
{{daysSinceToday(scope.item[0].theItemDate)}}
Without the expression, it DOES give me the correct value but seems to ignore the ng-class. What am I missing here? I must be tired, and this monday should end on a high note lol. Thanks!
Hah! File under I Blame Lack Of Caffeine, you want:
ng-class="{
'someclass':daysSinceToday(scope.item[0].theItemDate) <= 20,
'anotherclass':daysSinceToday(scope.item[0].theItemDate) > 20 && daysSinceToday(scope.item[0].theItemDate) < 30,
'yetanotherclass':daysSinceToday(scope.item[0].theItemDate) >= 30
}">
...no curlies necessary inside the ng-class.
(The rules for when you need {{}} and when you don't are arbitrary and confusing easy to overlook, as demonstrated quite clearly here)
You shoudn't be accessing it as scope.item[0].
I am not sure what is the variable you are iterating in ng-repeat but, assuming you are using something like items, you should access it just with items[0].whatever(...
Related
Have to implement scenario where both && and || should work in one expression like below
ng-class = "{'class_name' : condition1 || condition2 || (condition3 && condition4)}"
Its possible if yes then how?
It should work the way you wrote it, if it doesn't make sure you have the right starting and closing of brackets and parenthesis. It would be helpful if you post your code here. If you want to understand more using ng-class, you can go through the following well-written article.
https://scotch.io/tutorials/the-many-ways-to-use-ngclass
#Dan Thank you so much for your comment.
as question This not working directly but using the function works perfect.
I don't want to use any Javascript code or $scope variable.
Just want to print 1,2,3,4,5 values in Drop Down using ng-options.
This is what I have tried:
<select ng-name="priority" ng-options="priority for priority in Range(1, 5)"></select>
Working solution, within your requirements:
<select ng-model="priority" ng-options="priority for priority in [1,2,3,4,5]"></select>
Just in case, here's the plnkr to experiment with. If you have a quick look at the angular source code, you will see that ng-options requires select element as well as ng-model. Not sure what is the Range implementation mentioned in your example, but here is a very creative thread on this topic. Though, if your array is always the same and you really don't want to use scope (but why?), you're better off with the solution above.
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
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>
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.