AngularJS - Chỉ thị

Các chỉ thị AngularJS được sử dụng để mở rộng HTML. Chúng là các thuộc tính đặc biệt bắt đầu bằngng-tiếp đầu ngữ. Hãy để chúng tôi thảo luận về các chỉ thị sau -

ng-app - Chỉ thị này bắt đầu một Ứng dụng AngularJS.
ng-init - Chỉ thị này khởi tạo dữ liệu ứng dụng.
ng-model - Chỉ thị này xác định mô hình có thể thay đổi được sử dụng trong AngularJS.
ng-repeat - Lệnh này lặp lại các phần tử HTML cho từng mục trong một bộ sưu tập.

chỉ thị ng-app

Lệnh ng-app khởi động Ứng dụng AngularJS. Nó xác định phần tử gốc. Nó tự động khởi tạo hoặc khởi động ứng dụng khi trang web chứa Ứng dụng AngularJS được tải. Nó cũng được sử dụng để tải các mô-đun AngularJS khác nhau trong Ứng dụng AngularJS. Trong ví dụ sau, chúng tôi xác định một ứng dụng AngularJS mặc định bằng cách sử dụng thuộc tính ng-app của phần tử <div>.

<div ng-app = "">
   ...
</div>

chỉ thị ng-init

Chỉ thị ng-init khởi tạo dữ liệu Ứng dụng AngularJS. Nó được sử dụng để gán giá trị cho các biến. Trong ví dụ sau, chúng tôi khởi tạo một mảng các quốc gia. Chúng tôi sử dụng cú pháp JSON để xác định mảng các quốc gia.

<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, 
   {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
   ...
</div>

chỉ thị ng-model

Chỉ thị ng-model xác định mô hình / biến được sử dụng trong Ứng dụng AngularJS. Trong ví dụ sau, chúng tôi xác định một mô hình có tên là tên .

<div ng-app = "">
   ...
   <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

chỉ thị ng-lặp lại

Lệnh ng-repeat lặp lại các phần tử HTML cho mỗi mục trong một tập hợp. Trong ví dụ sau, chúng tôi lặp lại mảng các quốc gia.

<div ng-app = "">
   ...
   <p>List of Countries with locale:</p>
   
   <ol>
      <li ng-repeat = "country in countries">
         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
      </li>
   </ol>
</div>

Thí dụ

Ví dụ sau cho thấy việc sử dụng tất cả các chỉ thị nêu trên.

testAngularJS.htm

<html>
   <head>
      <title>AngularJS Directives</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, 
         {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> 
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
         <p>List of Countries with locale:</p>
      
         <ol>
            <li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
            </li>
         </ol>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Đầu ra

Mở tệp kiểm traAngularJS.htm trong trình duyệt web. Nhập tên của bạn và xem kết quả.