I'm trying to get a zero value to show up in angular UI.
<ng-show ng-show="item._source.change.backOrdered"><br> {{'pages.items.backOrdered' | translate}} {{item._source.change.backOrdered}}</ng-show>
So there's 2 cases - when the value is undefined it shouldn't display. But when the value is 0 it should be displayed.
Is there a trick to make this work, like convert the zero to string or something?
Use ng-show=var != null:
<ng-show ng-show="item._source.change.backOrdered != null">
<br> {{'pages.items.backOrdered' | translate}} {{item._source.change.backOrdered}}
</ng-show>
i think you can use angular.isNumber
js:
$scope.isNumber = function(value){
return angular.isNumber(value);
}
html:
<ng-show ng-show="isNumber(item._source.change.backOrdered)"><br> {{'pages.items.backOrdered' | translate}} {{item._source.change.backOrdered}}</ng-show>
Related
I've been trying to make a list of geozones, with a select of taxes each (not all taxes apply to all geozones).
So I did a ng-repeat for the geozones, and inside each of them a ng-repeat with all taxes. Problem is I don't know how to send the id of the geozone being filtered at the moment. This is the code right now:
<md-option ng-repeat="tax in taxClasses | filter: filterTax" value="{{ '{{ tax.id }}' }}">{{ '{{ tax.name }}' }}</md-option>
and the JS:
$scope.filterTax = function(tax, n){
angular.forEach(tax.geoZone , function(geo){
if(geo === $scope.prices[n].geozoneId){
return true;
}
});
return false;
};
Need n to be the index of the geozone, or something of the sort. Thanks in advance!
Your idea is not that far off, but using filter: is not even necessary, as the pipe | is already a filter command:
ng-repeat="<var> in <array> | <filterFunction>:<...arguments>"
Thus you can create a filter (see https://docs.angularjs.org/guide/filter for details on that)
ng-repeat="tax in taxClasses | filterTax: <geozoneIndex>"
The value form the collection will be passed as the first argument of your filterTax function. Any further argument is passed separated by a colon :.
When you use this, you have to propagate a filter method like this:
app.module(...).filter('filterTax', function(/* injected services */) {
return function (/* arguments */ input, geozoneIndex) {
// function body
}
});
Alternatively use a filter function from your scope:
// template
ng-repeat="tax in filterTaxes(taxClasses, <geozoneIndex>)"
// script
$scope.filterTaxes = function(taxClasses, geozoneIndex) {
// do the whole filtering, but return an array of matches
return taxClasses.filter(function(taxClass) {
return /* in or out code */;
});
};
This means your geozoneIndex may be either a fixed value or being pulled from a variable, that's available in that scope.
Just be aware that your filterTax function will be called a lot, so if your page is getting slow you might want to consider optimizing that filtering.
How to filter my object inside expression value?
I have this ng-repeat
ng-repeat="(series, detailData) in projectDetails"
the return of detailData is object which is i need to filter to get exactly field that i need.
{"projectViewType":"card1",
"projectName":"Hamilton",
"projectType":"Onprocess"},
{"projectViewType":"card2",
"projectName":"Christone",
"projectType":"Done"},
{"projectViewType":"card2",
"projectName":"Villas",
"projectType":"Done"} .... more
I need to filter this result with projectType = Done
and return all object with projectType = Done
You can try this
<div ng-repeat="project in projectDetails| filter: { projectType : 'Done' }">
Can't you just add a standard filter?
ng-repeat="(series, detailData) in projectDetails | filter:{'projectType':'Done'}"
I don't even think you'd need a custom filter.
Check the docs here https://docs.angularjs.org/api/ng/filter/filter especially the part where it describes the expression argument.
ng-repeat="(series, detailData) in projectDetails | filter: projectType == "Done" "
Is there a way to type:
<div ng-repeat="item in items | limitTo:what">
where I can substitute "what" with something that will make it iterate through the whole list of items. (note items.length is not what I am searching for.. or it must be with some ugly if inside the html).
In the source for limitTo there is support for an infinite number (Infinity):
if (Math.abs(Number(limit)) === Infinity) {
limit = Number(limit);
} else {
limit = int(limit);
}
Looks like you should be able to set to Number.POSITIVE_INFINITY.
However, the resulting code would probably be no better than using items.length. And would certainly be less understandable.
you don't need {{ }}, here is the documentation
<div ng-repeat="item in items | limitTo:what">
in the controller
$scope.what = 3; // iterate only 3
This is simple man
<div ng-repeat ="item in items | limitTo:10">
or $scope.what = '10'; and use what in limit.
I use angular v1.3.0-beta.11. I have used limitTo filter as follows:
ng-repeat="item in calendarItems | limitTo: calendarItemsLimit"
when i set calendarItemsLimit to Number.MAX_VALUE which is 1.7976931348623157e+308 then the result is that angular shows only one list item. Seems like angularJs understands Number.MAX_VALUE as 1.
AngularJs docs say that limit parameter passed to limitTo filter can be number or string. So Number.MAX_VALUE is number , but seems that angular interprets it as string .
Can anyone explain this strange behaviour?
Thanks in advance.
I have debugged angular sources for v1.3.0-beta.11. The implementation of limitTo filter contains:
if (Math.abs(Number(limit)) === Infinity) {
limit = Number(limit);
} else {
limit = int(limit);
}
int function is defined as follows:
function int(str) {
return parseInt(str, 10);
}
so when limit is set to Number.MAX_VALUE the "else" block executes and limit is passed to parseInt function. Hence the limit will be set to 1
The AngularJS Noob Handbook has some code which reduces class manipulation to a simple expression and binding :
<a ng-click="flags.open=!flags.open">...<div ng-class="{active:flags.open}">
However, what is the expression syntax in ng-class? I understand that a vertical bar (|) would pass through a filter and that a filter can be passed parameters after a colon but the above code is doing something different. If the scope variable on the right evaluates to true then the expression on the left is included otherwise it's dropped.
Is this specific to the ng-class directive? Is there some documentation on http://docs.angularjs.org that explains this?
This is mentioned briefly (too briefly, in my opinion) in the ngClass documentation. If you pass an object to ngClass, then it will apply each key of the object as a class to the element if that key's value is true. For example:
$scope.first = true
$scope.second = false
$scope.third = true
with
<div ng-class="{a: first, b: second, c: third}"></div>
would result in
<div class="a c"></div>
you've probably also seen something like this:
<div ng-class="{true: 'complete'}[item.Id != 0]"></div>
Very rad syntax.
EDIT:
What happens here, is that the "complete" class is added to the element if(item.Id != 0). Alternatively, we could write: <div ng-class="{false: 'cookieless'}[monsterEatsCookies('Elmo')]. As its decided by the monsterEatsCookies function, Elmo does not eat cookies so since this function returns false the html element gains a class called cookieless.
A simple example: <div ng-class="{false: 'DoubleNegative'}[1 == 0]. 1 !== 0 which is "false" -- the "DoubleNegative" class is added to the element.
<div ng-class="{ true: 'complete' } [item.Id != 0]"></div>
`
| | | | | | | |
| |result| |className | | | |
| | | | |
| function | | | condition |
Addendum
Also, I just realized that you can use a variety of different keys to map to your condition. For example:
ng-class="{ true: 'highlight', undefined: 'mute' }[ item.hasValue ]"
The mute class will be applied if item has no "hasValue" property. Furthermore, you can apply a class for any given type or value:
{'Jonathan Chapman': 'embolden', '[object Object]': 'hide'}[ item.toString() ]
In the following collection, this would embolden a person's name while hiding items that are objects:
[
'Jonathan Chapman',
{ aka: 'Johnny Applyseed' },
'Brad Pitt',
{ details: 'Fights Zombies' }
]
With this, you could watch for specific values in any $scope property. I suppose this could come in very handy at times.
Cheers
ng-click="flags.open=!flags.open"
switch the value of the flags.open to true or false.
And
ng-class="{active:flags.open}"
decides whether the class active is present or not based on the value of flags.open.
Please see the Fiddle demonstrating the above example.
like this example below :
div(ng-class=" condition ? ['class_one', 'class_two'] : ['class_three', 'class_four']")
Here's how you can pass expression with filter:
<div ng-class="{ 'customer-page': ('customer' | isRoute),
'orders-page': ('orders' | isRoute) }">....</div>