AngularJS 指令

AngularJS 通过被称为 指令 的新属性来扩展 HTML。

AngularJS 通过内置的指令来为应用添加功能。

AngularJS 允许你自定义指令。

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

重复 HTML 元素

ng-repeat 指令会重复一个 HTML 元素：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

</head>

<body>

<div ng-app="" ng-init="name=['John','Janme','yunfei']">

   <ul>

       <li ng-repeat="x in name">{{x}}</li>

   </ul>

</div>

</body>

</html>

ng-repeat 指令用在一个对象数组上：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="angular-1.6.3/angular.js"></script>

</head>

<body>

<div ng-app="" ng-init="names=[

{name:'Jani',country:'Norway'},

{name:'Hege',country:'Sweden'},

{name:'Kai',country:'Denmark'}]">

    <p>循环对象：</p>

    <ul>

        <li ng-repeat="x    in names">

            {{ x.name + ', ' + x.country }}

        </li>

    </ul>

</div>

</body>

</html>

AngularJS学习篇（二）的更多相关文章

  1. AngularJS学习篇（二十四）

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  2. AngularJS学习篇（二十三）

    AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...

  3. AngularJS学习篇（二十二）

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  4. AngularJS学习篇（二十一）

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...

  5. AngularJS学习篇（二十）

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

  6. AngularJS学习篇（十二）

    AngularJS SQL ASP.NET 中执行 SQL 获取数据 <!DOCTYPE html> <html> <head> <meta charset= ...

  7. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

  8. AngularJS学习笔记(二)

    一.AngularJS Select(选择框) 1.使用 ng-options 创建选择框 <div ng-app="myApp" ng-controller="m ...

  9. AngularJS 学习笔记二

    AngularJS指令 指令 描述 讲解 ng_app 定义应用程序的根元素. 指令 ng_bind 绑定 HTML 元素到应用程序数据. 简介 ng_click 定义元素被单击时的行为. HTML ...

随机推荐

  1. ThinkPHP中，display和assign用法详解

    thinkphp 模板显示display和assign的用法 $this->assign('name',$value); //在 Action 类里面使用 assign 方法对模板变量赋值,无论 ...

  2. 【转】 IntelliJ IDEA像Eclipse一样打开多个项目

    http://blog.csdn.net/zht666/article/details/47831893 我们做项目实际中经常会遇到这样的情况,创建一个common项目(Maven项目)作为公用项目, ...

  3. canvas，html2canvas等合成图片不清晰问题

    function  pxRa(cxt) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStor ...

  4. JS数字金额转换为货币汉字形式

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  5. nginx配置文件作用介绍

    ######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_ ...

  6. WordPress-基础设置之阅读设置

    对于第一次使用Wordpress系统的朋友,请先别着急发布文章及进行其他操作,为了更加科学的使用及管理wordpress,应该需要对其进行相关设置,主要涉及3个部分,一.常规设置,二.阅读设置,三.固 ...

  7. 1-git初体验

    1 准备工作: windows系统下,安装好msysgit  -安装好后,在开始菜单找到Git  > Git bash 2 当前电脑配置用户名 邮箱 $ git config --global ...

  8. ZOJ-2091-Mean of Subsequence （反证法的运用！！）

    http://blog.csdn.net/u014355480/article/details/40862041 ZOJ2091 题意:其实就是找后几个数的平均值的最大值!! (贪心策略!要找对) k ...

  9. LinearGradientBrush,RadialGradientBrush的样式说明

    LinearGradientBrush 使用线性渐变绘制区域.线性渐变沿直线定义渐变.该直线的终点由线性渐变的 StartPoint 和 EndPoint 属性定义.LinearGradientBru ...

  10. px转vw和vh的工具（对前端同学有用）

    CSS3中有两个新尺寸单位vw和vh, 这两个单位非常适合于开发移动端自适应页面. 假如说有一个设计师做了一张1136x750px的页面,这长页面是针对iPhone6的屏幕设计的. 前端开发工程师将这 ...