Home > Article > Web Front-end > How to call encodeURIComponent in AngularJS template?
In this article, we will learn how to call encoded URI component from angularjs template in HTML.
Whenever a character appears in a URI, the encodeURIComponent() function will replace it with one, two, three, or four UTF-8 encodings representing the character. escape sequence (can only be four escape sequences of characters consisting of two "surrogate" characters).
The following is the syntax of encodeURIComponent
encodeURIComponent(uriComponent)
Any object, including string, number, boolean, null, or undefined. uriComponentConvert to string before encoding.
Let's look at the following example for better understanding.
In the example below, we use the encodeURI component
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
let uri = "https://www.tutorialspoint.com/index.htm";
let encoded = encodeURIComponent(uri);
document.getElementById("tutorial").innerHTML = encoded;
</script>
</body>
</html>
When running the above script, an output window will pop up showing the encoded URL of the URL we used in the above script.
In the following example, we use the function encodeURIcomponent(string) to encode the url parameter.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("mytutorials", []);
myApp.controller("mytutorials1", function($scope) {
$scope.url1 = 'https://www.tutorialspoint.com/index.htm';
$scope.url2 = '';
$scope.encodeUrlStr = function() {
$scope.url2 = encodeURIComponent($scope.url1);
}
});
</script>
</head>
<body>
<div ng-app="mytutorials">
<div ng-controller="mytutorials1">
<button ng-click ="encodeUrlStr()" >Encode URL</button>
<br>
URL1 = {{url1}}<br>
URL2 = {{url2}}
</div>
</div>
</body>
</html>
When the script executes, it will generate an output consisting of url1 and url2, which will be empty, and display an encodeURL button on the web page.
If the user clicks the encodeURL button, the url given in url1 will be encoded and displayed in url2.
The above is the detailed content of How to call encodeURIComponent in AngularJS template?. For more information, please follow other related articles on the PHP Chinese website!