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}}
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 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)
I am using xeditable to edit data inline. Now I want to edit a numeric field, but the source data contains the number as string formatted. So I get the error ngModel:numFmt. How can I convert a string formatted number (example: 0.3) into a numeric for xeditable?
I tried with the string-to-number directive, but it seems, that xeditable did not recognize it:
<td>
<span data-editable-number="row.factor"
data-ng-model="row.factor"
data-e-name="factor"
onbeforesave="validateRow(data, row.id)"
onaftersave="save(row)"
data-e-required
string-to-number="string-to-number"
>
{{row.factor}}
</span>
</td>
You can create a filter to convert String to Integer
app.filter('num', function(){
return function(input) {
return parseInt(input, 10);
};
});
and use it like this
editable-number="row.factor | num "
Working Plunker
The previous didn't work updating the model, better way to achieve this is to transform the data beforehand.
e.g
var rows = [{factor:"1"}, {factor: "4"}, {factor: "9"}];
var tranformed_rows = rows.map(function(row) {
row.factor = parseInt(row.factor);
return row;
});
and then use tranformed_rows in your view.
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'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>