AngularJS_AngularJS에서 몇 가지 일반적인 지침을 구성합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

AngularJS_AngularJS에서 몇 가지 일반적인 지침을 구성합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:54 PM

angularjs지침

AngularJS 지시문은 HTML을 확장하는 데 사용됩니다. 이는 ng- 접두사로 시작하는 특수 속성입니다. 우리는 다음 지시문에 대해 논의할 것입니다:

ng-app - 이 명령은 AngularJS 애플리케이션을 시작합니다.
ng-init - 이 지시문은 애플리케이션 데이터를 초기화합니다.
ng-model - 이 지시문은 AngularJS에서 사용되는 변수인 모델을 정의합니다.
ng-repeat - 이 지시문은 컬렉션의 각 항목에 대해 HTML 요소를 반복합니다.

ng-app 지시어

ng-app 지시문은 AngularJS 애플리케이션을 시작합니다. 루트 요소를 정의합니다. AngularJS 애플리케이션이 포함된 웹 페이지를 로드하는 애플리케이션을 자동으로 초기화하거나 시작합니다. 또한 다양한 AngularJS 모듈을 AngularJS 애플리케이션에 로드하는 데에도 사용됩니다. 아래 예에서는 div 요소의 ng-app 속성을 사용하여 기본 AngularJS 애플리케이션을 정의합니다.

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

ng-init 명령

ng-init 지시문은 AngularJS 애플리케이션의 데이터를 초기화합니다. 어플리케이션에서 사용되는 변수에 값을 넣을 때 사용됩니다. 다음 예에서는 국가 배열을 초기화합니다. 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 애플리케이션에 사용되는 모델/변수를 정의합니다. 아래 예에서는 "name"이라는 모델을 정의합니다.

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

ng-반복 지시어

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

<html>
<title>AngularJS Directives</title>
<body>
<h1 id="Sample-Application">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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

출력

웹 브라우저에서 textAngularJS.html을 엽니다. 이름을 입력하고 아래 결과를 확인하세요.

2015616115415280.png (613×372)

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

泰拉瑞亚怎么用指令获得物品？-泰拉瑞亚怎么收藏物品?Mar 19, 2024 am 08:13 AM

泰拉瑞亚怎么用指令获得物品？一、什么是泰拉瑞亚给予物品指令在泰拉瑞亚游戏中，给予物品指令是一项非常实用的功能。通过这个指令，玩家可以直接获取需要的物品，而不必费力地去打怪或者传送到某个地点。这样可以极大地节省时间，提高游戏的效率，让玩家更专注于探索和建设世界。总的来说，这个功能让游戏体验变得更加流畅和愉快。二、如何使用泰拉瑞亚给予物品指令1.打开游戏并进入游戏界面。2.按下键盘上的“Enter”键，打开聊天窗口。3.在聊天窗口中输入指令的格式：“/give[玩家名称][物品ID][物品数量]”。

VUE3快速入门：使用Vue.js指令实现选项卡切换Jun 15, 2023 pm 11:45 PM

本文旨在帮助初学者快速入手Vue.js3，实现简单的选项卡切换效果。Vue.js是一个流行的JavaScript框架，可用于构建可重用的组件、轻松管理应用程序的状态和处理用户界面的交互操作。Vue.js3是该框架的最新版本，相较于之前的版本变动较大，但基本原理并未改变。在本文中，我们将使用Vue.js指令实现选项卡切换效果，目的是让读者熟悉Vue.js的

2022年最新5款的angularjs教程从入门到精通Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

探索自带MC指令的输入法的无限可能性（打造完美游戏体验的创新工具——自带MC指令输入法）May 02, 2024 pm 03:01 PM

移动设备成为人们生活中必不可少的一部分，在现代社会。而游戏也成为人们闲暇时的主要娱乐方式之一。不断有人致力于开发新的工具和技术来优化游戏玩法，为了提高游戏体验。而自带MC指令的输入法就是其中一种引人注目的创新。以及它如何为玩家们带来更好的游戏体验，本文将深入探讨自带MC指令输入法的无限可能性。自带MC指令输入法简介自带MC指令输入法是一种结合了MC指令和智能输入法功能的创新工具。从而实现更多的操作和功能，通过在移动设备上安装该输入法、玩家可以方便地在游戏中使用各种指令。快速输入指令，提高游戏效率

使用PHP和AngularJS搭建一个响应式网站，提供优质的用户体验Jun 27, 2023 pm 07:37 PM

在如今信息时代，网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备，为用户提供优质的体验，成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站，从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言，非常适用于Web开发。PHP具有很多优点，如易于学习、跨平台、丰富的工具库、开发效

计算机能直接执行的指令包括哪两个部分Dec 09, 2020 am 09:15 AM

计算机能直接执行的指令包括操作码和操作数两个部分。操作码是指计算机程序中所规定的要执行操作的那一部分指令或字段，其实就是指令序列号，用来告诉CPU需要执行哪一条指令。

使用PHP和AngularJS构建Web应用May 27, 2023 pm 08:10 PM

随着互联网的不断发展，Web应用已成为企业信息化建设的重要组成部分，也是现代化工作的必要手段。为了使Web应用能够便于开发、维护和扩展，开发人员需要选择适合自己开发需求的技术框架和编程语言。PHP和AngularJS是两种非常流行的Web开发技术，它们分别是服务器端和客户端的解决方案，通过结合使用可以大大提高Web应用的开发效率和使用体验。PHP的优势PHP

Prompt都不需要了，动动手就能玩多模态对话系统，iChat来啦！May 15, 2023 pm 05:55 PM

夕小瑶科技说原创作者|智商掉了一地近日有很多团队基于用户友好的ChatGPT进行再创作，其中不乏有比较亮眼的成果。InternChat工作强调了用户友好性，这是通过超越语言的方式（光标与手势）与聊天机器人交互来进行多模态任务的。InternChat的命名也比较有趣，代表着互动（interaction）、非语言（nonverbal）和聊天机器人（chatbots），可以简称为iChat。与现有依赖纯语言的交互系统不同，iChat通过加入指向指令，显著提高用户与聊天机器人之间的交流效率。此外，作者还

See all articles