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>
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.
I have an array of people with firstNames and lastNames. I'm want to ng-repeat through the them and then orderBy: 'lastName'. This works fine.
However, some persons in my people array only have a first name. I want to be able to order by the last name, and whenever it finds someone with a only a first name, to treat that first name as a last name, ie. the initial of the first name is alphabetised with the rest of the last names (hope that makes sense...)
Is it a case of writing a function in my controller and then calling that variable in the orderBy: expression? I've tried that and it didn't work:
Controller:
self.nameOrder = function(thisOne) {
if (thisOne.lastName == null) {
thisOne.firstName == thisOne.lastName;
}
}
View:
<p ng-repeat="name in people | orderBy: 'lastName.nameOrder()' ">{{lastName}}</p>
I'm aware the above is probably totally wrong, but I thought it better to at least show what I've been attempting so it's clearer what my intentions are :/
Any help would be appreciated. Thanks in advance.
The function is supposed to be a getter, i.e. to return a value that orderBy will use to compare all the users with each other.
Your function doesn't return anything. Moreover, you're not passing the function as argument to orderBy. The code should be:
self.nameOrder = function(thisOne) {
// return lastName, or firstName if lastName is null
return thisOne.lastName || thisOne.firstName;
}
and the html should use
ng-repeat="name in people | orderBy:vm.nameOrder"
(assuming vm is the alias used for your controller)
Maybe the problem is with:
thisOne.firstName == thisOne.lastName;
That line should be:
thisOne.firstName = thisOne.lastName;
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 try to do this:
<div id="{{mystring.replace(/[\s]/g, \'\')}}"></div>
but its not working. "mystring" is an object on $scope with string like "my string is this" with spaces I want to remove from the view.
Just create a dedicated filter :
angular.module('filters.stringUtils', [])
.filter('removeSpaces', [function() {
return function(string) {
if (!angular.isString(string)) {
return string;
}
return string.replace(/[\s]/g, '');
};
}])
and call it like :
<div id="{{'hi there'| removeSpaces}}"></div>
If you simply need it in one or two places it may be easier to split and join:
$scope.boundString = 'this is a string with spaces'
with that you could do in your template:
<span>my string is: {{ boundString.split(' ').join('') }}</span>
and you would get:
my string is: thisisastringwithoutspaces
another approach that has been mentioned is the regex version ('g' is for global):
<span>my string is: {{ boundString.replace(/ /g, '') }}</span>
I guess the point is that you can do whatever you want to a string within an expression. These examples are bad convention with respect to Angular dirty-checking. In Angular, bound functions (string.replace, string.split) get evaluated differently opposed to a specified value (string, boolean) when bound to a template's expression. The result of a bound function must be evaluated before Angular knows whether or not to update the DOM. This can be costly over a large app. I would suggest using another variable to track the un-spaced value:
$scope.noSpaces = $scope.boundString.replace(/ /g, '');
HTML:
<span>{{ noSpaces }}</span>
This way, when a digest loop is triggered, Angular will check if noSpaces has changed as opposed to evaluating boundString.replace(/ /g, '').
What if you are ng-repeating? Good question.
for (var idx = 0, idx < $scope.boundIterable.length, i++) {
$scope.boundIterable[i].noSpaces = $scope.boundIterable[i].boundString.replace(/ /g, '');
}
HTML:
<ul ng-repeat="iterable in boundIterable">
<li>{{ iterable.noSpaces }}</li>
</ul>
The directive mentioned works pretty well. But if you want to remove spaces for smaller texts, you can use
.split(" ").join("")
This replaces the complete spaces unlike .replace(" ","") which replaces only the first space.
You can replace all spaces by blank by using replace():
.replace(" ","")
How about {{ string.trim() }}?
Source
You can do it by using replace():
{{mystring.replace(" ","")}}
that's it I hope so.
removeSpaces() {
originalText ="hi! here i'm";
removedSpacesText = originalText.split(" ").join("");
}