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. Java源码学习:HashMap实现原理

    AbstractMap HashMap继承制AbstractMap,很多通用的方法,比如size().isEmpty(),都已经在这里实现了.来看一个比较简单的方法,get方法: public V g ...

  2. 【黑马18期Java毕业生】黑马程序员Java全套资料+视频+工具

        Java学习路线图引言:        黑马程序员:深知广大爱好Java的人学习是多么困难,没视频没资源,上网花钱还老被骗. 为此我们历时一个月整理这套Java学习路线图,不管你是不懂电脑的小 ...

  3. 大数据 - Teradata学习体会

    引言 随着计算机系统在处理能力.存储能力等方面,特别是计算机软件技术的不断提高,使得信息处理技术得到飞速发展. 数据处理主要分为两大类:联机事物处理OLTP.联机分析处理OLAP.OLTP也就是传统的 ...

  4. java集合系列——List集合之LinkedList介绍（三）

    1. LinkedList的简介 JDK 1.7 LinkedList是基于链表实现的,从源码可以看出是一个双向链表.除了当做链表使用外,它也可以被当作堆栈.队列或双端队列进行操作.不是线程安全的,继 ...

  5. JSP入门 Filter

    Filter,它的名字是过滤器,可以批量拦截修改servlet的请求和响应. 需要实现接口Filter 配置 <filter> <filter-name>EncodingFil ...

  6. APUE 4 - 线程

    对传统的UNIX进程来讲,一个进程中只有一个线程,这就意味着一个进程在同一时刻只能做一件事(即使是多核CPU).使用多线程技术, 我们可以设计程序使得一个进程在同一时刻做多件事.使用多线程编程具有以下 ...

  7. 最接近原生APP体验的高性能前端框架-MUI

      前  言 轻量,原生UI,流畅体验,是MUI的三个特征.   1. 新手指南 快速体验 1. 下载Hello mui App 下载已打包好的Hello mui 手机app,直接在手机上体验mui的 ...

  8. WPF DataGrid自动生成行号

      在使用WPF进行应用程序的开发时,经常会为DataGrid生成行号,这里主要介绍一下生成行号的方法.通常有三种方法,这里主要介绍其中的两种,另一种简单提一下. 1. 直接在LoadingRow事件 ...

  9. Collection和Map的默认扩容参数

    初始大小:调用无参构造函数时默认的容量 加载因子:超过 (当前容量*加载因子) 时会进行扩容 扩容因子:扩容时增加的容量为 (当前容量*扩容因子)        容器         初始容量    ...

  10. interface接口

    当一个抽象类中的方法都是抽象的时候,这时可以将该抽象类用另一种形式定义和表示,就是接口 interface. 定义接口使用的关键字不是class,是interface.接口中常见的成员: 这些成员都有 ...