How to generate url encoded anchor links with AngularJS?
AngularjsAnchorUrlencodeAngularjs Problem Overview
<a href="#/search?query={{address}}" ng-repeat="address in addresses">
{{address}}
</a>
generates links that are not url encoded if I understand correctly. What is the proper way to encode #/search?query={{address}}
?
Example address is 1260 6th Ave, New York, NY
.
Angularjs Solutions
Solution 1 - Angularjs
You can use the native encodeURIComponent
in javascript.
Also, you can make it into a string filter to utilize it.
Here is the example of making escape
filter.
js:
var app = angular.module('app', []);
app.filter('escape', function() {
return window.encodeURIComponent;
});
html:
<a ng-href="#/search?query={{address | escape}}">
(updated: adapting to Karlies' answer which uses ng-href
instead of plain href
)
Solution 2 - Angularjs
@Tosh's solution will return #/search?query=undefined
if address
is undefined in
<a ng-href="#/search?query={{address | escape}}">
If you prefer to get an empty string instead for your query you have to extend the solution to
var app = angular.module('app', []);
app.filter('escape', function() {
return function(input) {
if(input) {
return window.encodeURIComponent(input);
}
return "";
}
});
This will return #/search?query=
if address
is undefined.
Solution 3 - Angularjs
You could use the encodeUri filter: https://github.com/rubenv/angular-encode-uri
- Add angular-encode-uri to your project:
bower install --save angular-encode-uri
- Add it to your HTML file:
<script src="bower_components/angular-encode-uri/dist/angular-encode-uri.min.js"></script>
- Reference it as a dependency for your app module:
angular.module('myApp', ['rt.encodeuri']);
- Use it in your views:
<a href="#/search?query={{address|encodeUri}}">
Solution 4 - Angularjs
Tosh's answer has the filter idea exactly right. I recommend do it just like that. However, if you do this, you should use "ng-href" rather than "href", since following the "href" before the binding resolves can result in a bad link.
filter:
'use strict';
angular.module('myapp.filters.urlEncode', [])
/*
* Filter for encoding strings for use in URL query strings
*/
.filter('urlEncode', [function() {
return window.encodeURIComponent;
}]);
view:
<a ng-href="#/search?query={{ address | urlEncode }}" ng-repeat="address in addresses">
{{address}}
</a>
Solution 5 - Angularjs
this is a working code example:
app.filter('urlencode', function() {
return function(input) {
return window.encodeURIComponent(input);
}
});
And in the template:
<img ng-src="/image.php?url={{item.img_url|urlencode}}"