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.
Related
I have a project which is client solution based on angularJS calling an API. Formulas that should run on client solution are retrieved from the API, and parameters of each formula will be replaced by values entered by the client user.
Formulas are a bit complicated, not a simple addition or division....
Example:
"if('rented' == 'owned')
{ return 50 + 25;
} else if( 'rented' == 'rented')
{return 25;}
else
{ return '' ;
}"
In order to execute this String it was suggested to use $scope.$eval(string). I have tried it with some simple params like $scope.$eval('1 + 2') and it worked successfully. But with the above example it is throwing parsing errors like this one:
The complete angularJS function in the controller is the below:
$scope.calulateFormula = function (formula) {
formula = formula.replace(/\[P1]/g, $scope.param1.value);
formula = formula.replace(/\[P2]/g, $scope.param2.value);
return $scope.$eval(formula);
}
In HTML page:
<tr ng-repeat="formula in lstFormulas">
</td>
<td ng-bind="calulateFormula(formula)">
</td>
</tr>
lstFormulas is retrieved from the API.
So how can I fix this issue and make formulas run on my webPage?
If you can replace all variables with values from scope, you can then use plain js:
var f = new Function(formula);
console.log(f());
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}}
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>
<input type="text" ng-model="user.User.DateOfBirth"> is in my view. user.User.DateOfBirth is currently in YYYYMMDD format, but I want it to show as mm/dd/yyyy format in the view. Is it possible to convert this just for the display?
This also may help you
http://jsfiddle.net/mikeeconroy/Hu9m2/1/
.filter('myFormatDateFilter',function(){
return function(input){
if(angular.isDefined(input)){
if(input.length >= 8){
input = input.slice(0,8);
input = input.slice(4,6) + '/' + input.slice(6,8) + '/' + input.slice(0,4);
}
}
return input;
};
});
For outputting the data in the correct format try filters (in your case the date filter: http://docs.angularjs.org/api/ng.filter:date)
Well, for inputs that's another case. I guess you could always bind that input to another property, watch that and parse it yourself and then assign it to your real model...
Some more insight, you could try something like this:
HTML:
<input type="text" ng-model="myDateInput">
In your JS controller use the following:
$scope.$watch('myDateInput', function (newValue) {
$scope.user.User.DateOfBirth = $filter('date')(newValue, 'yyyy-MM-dd'); // Or whatever format your real model should use
});
$scope.$watch('user.User.DateOfBirth', function (newValue) {
$scope.myDateInput = $filter('date')(newValue, 'yyyy-MM-dd'); // Or whatever format your input should use
});
It would probably be better though to force the user to use a certain input format, either by some sort of pattern matching (and therefore validation) or by some sort of special date input/widget.