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. C#设计模式之五创建者模式（Builder）【创建型】

    一.引言  今天我们要讲讲Builder模式,也就是建造者模式,当然也有叫生成器模式的.在现实生活中,我们经常会遇到一些构成比较复杂的物品,比如:电脑,它就是一个复杂的物品,它主要是由CPU.主板.硬 ...

  2. Linux入门之常用命令（4）vi编辑器

    vi分为三种模式 一般模式:删除字符.删除整行.复制粘贴等操作 编辑模式:i o a r进入 输入字符  Esc退出 命令行模式::或/ 将光标移动到最末行 搜寻数据 读取或替换 退出vi 显示行号 ...

  3. poj2823一道纯单调队列

    Sliding Window Time Limit: 12000MS   Memory Limit: 65536K Total Submissions: 32099   Accepted: 9526 ...

  4. VB.net shell、IO.File.Open、Process.Start、Shellexecute API 运用经验总结

    打开文件还有很多方法,但我了解到运用较多的是上面几种- -,为了防止以后忘记,先把了解到的写下来. 1.Shell 这个看了很多网页,最靠谱的运用方法: Shell("cmd.exe /c ...

  5. FPGA与数字信号处理

    过去十几年,通信与多媒体技术的快速发展极大地扩展了数字信号处理(DSP)的应用范围.眼下正在发生的是,以更高的速度和更低的成本实现越来越复杂的算法,这是针对高级信息服更高带宽以及增强的多媒体处理能力等 ...

  6. http://zthdd.bokee.com/6189963.html

    http://zthdd.bokee.com/6189963.html先保存

  7. c# datetime与 timeStamp（unix时间戳） 互相转换

    /// <summary> /// Unix时间戳转为C#格式时间 /// </summary> /// <param name="timeStamp" ...

  8. Android 设备兼容性(1)

    引用: Android官网 > 开发 > API 指南 > Introduction > Device Compatibility 1. 基本概念 Android被设计成能在各 ...

  9. 人工智能 tensorflow框架-->简介及安装01

    简介:Tensorflow是google于2015年11月开源的第二代机器学习框架. Tensorflow名字理解:图形边中流动的数据叫张量(Tensor),因此叫Tensorflow 既 张量流动 ...

  10. python中sys.exit()和os._exit(0)退出程序

    python中退出程序的两种方法,0为默认状态,可以为空,两者均会退出当前运行的程序,os._exit(0)中的0不能省略 sys.exit(0):可以捕获SystemExit异常,然后做相应的清理工 ...