I am getting a negative number from JSON object. I want to remove "-" form that negative number and only display the absolute value.
Received json:
{
"value": -2.34
}
What I want to show:
The value is: 2.34
You can use angular filter
js file
angular.module('myApp',[]).filter('makePositive', function() {
return function(num) { return Math.abs(num); }
});
html file
{{ (-12) | makePositive }}
{{ (2) | makePositive }}
output
12 2
You can use JavaScript supported built-in Math object for getting absolute value.
Math.abs(-2.34)
The Math.abs() function returns the absolute value of a number
Reference
Math.abs(number)
This will get you the absolute value of any number you put in there, including the removal of any leading zeroes.
Additionally, you can also do this:
parseInt(number, 10)
Related
I need to render characters such as < and >, which may be included in a user's first or last name. I'm using angular translate to render the name, passing the first and last name as values. However, if the first or last name contains < the value will not be displayed. I think I need to use something like ng-bind="translation_key | translate | values" but this is incorrect. How can I use ng-bind with angular translate interpolation? Is this the correct way to go about rendering a translated value that contains chars such as <, >? Thanks.
*Edit
This almost works but the sanitizer outputs an error.
ng-bind="'locales.user_filter' | translate: { first: user.firstName, last: user.lastName }"
Error: [$sanitize:badparse] The sanitizer was unable to parse the following block of html:
I wound up using a filter before passing the values to the translation key.
.filter('htmlEntities', function () {
return function (input) {
return String(input).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
};
});
var first = $filter('htmlEntities')(scope.user.firstName);
var last = $filter('htmlEntities')(scope.user.lastName);
scope.displayName = $translate.instant('locales.user_filter', { first: first, last: last });
<td ng-bind-html="displayName"></td>
I m new at angular.js
I have a ID column in my grid so I dont want to use formatted numbers with comma or dot. Should I use replace method or related regex expression?
I used like:
{{value | number: 0}}
For example(10000 is 10,000 in my application I want to use like 10000)
Then don't use the number filter?
Else, if you want it to be a number type create a custom filter:
app.filter('customNumber', function() {
return function(value) {
return parseInt(value, 10) //convert to int
}
})
template:
{{value | customNumber}}
How to prefix an angular value in HTML side.
In my project i am using the below line to show zip code .
<span>{{activeProperty.Zip}}</span>
I want that while displaying the zip, it will check whether the activeProperty.Zip length is 5 or not.if it is less then five then add leading zeros to activeProperty.Zip
For example if 4567 then it will show 04567 but if 45670 is there then will show 46670 only.
I dont want to do this in angular side as updating the activeProperty.Zip in controller leads so many issue as using the same in so many places. Is their any way to do it in HTML side ?
You need to create a filter that will pad the zip with zeroes, see this fiddle:
http://jsfiddle.net/HB7LU/11739/
myApp.filter('pad', function () {
return function(zip) {
var newZip = zip;
if (zip.length < 5) {
newZip = Array(6 - zip.length).join('0') + newZip;
}
return newZip;
};
});
in your html: {{activeProperty.Zip | pad}}
You can still do it angular side without changing model with use of filters, here is simple example that you can extend for your use
app.filter('prefixMe', function() {
return function(input) {
return input.length < 5 ? '0' + input : input
};
});
<span>{{activeProperty.Zip | prefixMe}}</span>
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
I'm using ng-repeat to create a list of entires and using a filter.
Is it possible to get the number of entries returned, like a length
data-ng-repeat="entry in entries | filter: { country_code : countryCode }"
It is little bit tricky, use ng-init:
ng-init="filter_len = (entries | filter: { country_code : countryCode }).length"
Example: http://jsfiddle.net/KJ3Nx/
As you know filter responsible to "filter" the input list and it returns filtered list where objects have the same structure. Otherwise you get digest cycle reentering that causes Exceptions (aka > 10 cycles).
1st way
Get length after filtering:
<pre>{{(entries| myfilter:types).length }}</pre>
See Example
2nd way
Use custom filter and get length from there.
iApp.filter('myfilter', function() {
return function( entries) {
var filtered = [];
angular.forEach(entries, function(entry) {
filtered.push(entry);
});
// here fetch list length
return filtered;
};
});
I suppose the following code will work for you:
<p>Filtered number: {{(entries|filter:{country_code:countryCode}).length}}</p>
<p>Total number: {{entries.length}}</p>