Bagaimana untuk memanggil encodeURIComponent dalam templat AngularJS?-html tutorial-php.cn

Bagaimana untuk memanggil encodeURIComponent dalam templat AngularJS?

WBOY

Lepaskan： 2023-09-05 16:57:07

ke hadapan

1290 orang telah melayarinya

Bagaimana untuk memanggil encodeURIComponent dalam templat AngularJS?

Dalam artikel ini, kita akan belajar cara memanggil komponen URI yang dikodkan daripada templat angularjs dalam HTML.

Setiap kali aksara muncul dalam URI, fungsi encodeURIComponent() menggantikannya dengan satu, dua, tiga atau empat jujukan melarikan diri yang mewakili pengekodan UTF-8 aksara tersebut (hanya boleh menjadi empat jujukan melarikan diri aksara yang terdiri daripada dua watak "pengganti").

Tatabahasa

Berikut ialah sintaks encodeURIComponent

encodeURIComponent(uriComponent)

Salin selepas log masuk

Komponen uri

Sebarang objek, termasuk rentetan, nombor, boolean, batal atau tidak ditentukan. uriComponentTukar kepada rentetan sebelum pengekodan.

Mari kita lihat contoh berikut untuk pemahaman yang lebih baik.

Contoh 1

Dalam contoh di bawah, kami menggunakan komponen encodeURI

<!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>

Salin selepas log masuk

Apabila anda menjalankan skrip di atas, tetingkap output akan muncul menunjukkan URL yang dikodkan bagi URL yang kami gunakan dalam skrip di atas.

Contoh 2

Dalam contoh di bawah, kami menggunakan fungsi encodeURIcomponent(string) untuk mengekod parameter url.

<!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>

Salin selepas log masuk

Apabila skrip dilaksanakan, ia akan menghasilkan output yang terdiri daripada url1 dan url2, yang akan kosong, dan memaparkan butang encodeURL pada halaman web.

Jika pengguna mengklik pada butang encodeURL, url yang diberikan dalam url1 akan dikodkan dan dipaparkan dalam url2.

Atas ialah kandungan terperinci Bagaimana untuk memanggil encodeURIComponent dalam templat AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!