AngularJS - คำสั่ง

คำสั่ง AngularJS ใช้เพื่อขยาย HTML เป็นคุณลักษณะพิเศษที่ขึ้นต้นด้วยng- คำนำหน้า ให้เราหารือเกี่ยวกับคำสั่งต่อไปนี้ -

ng-app - คำสั่งนี้เริ่มต้นแอปพลิเคชัน AngularJS
ng-init - คำสั่งนี้เริ่มต้นข้อมูลแอปพลิเคชัน
ng-model - คำสั่งนี้กำหนดโมเดลที่เป็นตัวแปรที่จะใช้ใน AngularJS
ng-repeat - คำสั่งนี้ซ้ำองค์ประกอบ HTML สำหรับแต่ละรายการในคอลเลกชัน

คำสั่ง ng-app

คำสั่ง ng-app เริ่มแอปพลิเคชัน AngularJS เป็นการกำหนดองค์ประกอบราก เริ่มต้นหรือบูตแอปพลิเคชันโดยอัตโนมัติเมื่อโหลดหน้าเว็บที่มี AngularJS Application นอกจากนี้ยังใช้เพื่อโหลดโมดูล AngularJS ต่างๆใน AngularJS Application ในตัวอย่างต่อไปนี้เรากำหนดแอปพลิเคชัน AngularJS เริ่มต้นโดยใช้ ng-app แอตทริบิวต์ขององค์ประกอบ <div>

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

คำสั่ง ng-init

คำสั่ง ng-init เตรียมข้อมูลเบื้องต้นของ AngularJS Application ใช้เพื่อกำหนดค่าให้กับตัวแปร ในตัวอย่างต่อไปนี้เราเริ่มต้นอาร์เรย์ของประเทศ เราใช้ไวยากรณ์ JSON เพื่อกำหนดอาร์เรย์ของประเทศ

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

คำสั่ง ng-model

คำสั่ง ng-model กำหนดโมเดล / ตัวแปรที่จะใช้ใน AngularJS Application ในตัวอย่างต่อไปเรากำหนดรูปแบบการตั้งชื่อชื่อ

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

คำสั่ง ng-repeat

คำสั่ง ng-repeat ทำซ้ำองค์ประกอบ HTML สำหรับแต่ละรายการในคอลเลกชัน ในตัวอย่างต่อไปนี้เราจะทำซ้ำในอาร์เรย์ของประเทศต่างๆ

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

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้คำสั่งดังกล่าวข้างต้นทั้งหมด

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>

เอาต์พุต

เปิดไฟล์testAngularJS.htmในเว็บเบราว์เซอร์ ป้อนชื่อของคุณและดูผลลัพธ์