AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

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

ng-bind 指令把应用程序数据绑定到 HTML 视图。

ng-init 指令初始化 AngularJS 应用程序变量。

使用<pre></pre>来显示变量

创建自定义的指令

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

AngularJS 实例

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

你可以通过以下方式来调用指令：

  • 元素名
  • 属性
  • 类名
  • 注释

以下实例方式也能输出同样结果:

元素名

<runoob-directive></runoob-directive>

属性

<div runoob-directive></div>

类名

<div class="runoob-directive"></div>

注释

<!-- directive: runoob-directive -->

限制使用

你可以限制你的指令只能通过特定的方式来调用。

实例

通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

restrict 值可以是以下几种:

  • E 作为元素名使用
  • A 作为属性使用
  • C 作为类名使用
  • M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">

Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

</form>

ng-model 指令根据表单域的状态添加/移除以下类：

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

AngularJS 过滤器可用于转换数据：

过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：

AngularJS 实例

<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

ng1笔记的更多相关文章

  1. NET Core-学习笔记（二）

    这里要分享的是接着上篇:NET Core-学习笔记(一)展开的继续学习core笔记,有不妥之处或者更好见解的地方希望各位朋友多多分享. 下面是本篇将要分享的学习步奏,对于刚学或者即将要学习的朋友做个相 ...

  2. angular2 学习笔记 ( ngModule 模块 )

    2016-08-25, 当前版本是 RC 5. 参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html 提醒 : 这系列笔记的 " ...

  3. AngularJS学习笔记（一）走近AngularJS

    什么是AngularJS AngularJS是一款优秀的前端JS框架,是Google多款产品之一,简称ng. ng有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入 ...

  4. 啃掉Hadoop系列笔记(03)-Hadoop运行模式之本地模式

    Hadoop的本地模式为Hadoop的默认模式,不需要启用单独进程,直接可以运行,测试和开发时使用. 在<啃掉Hadoop系列笔记(02)-Hadoop运行环境搭建>中若环境搭建成功,则直 ...

  5. git-简单流程（学习笔记）

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  6. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  7. SQL Server技术内幕笔记合集

    SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...

  8. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  9. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

随机推荐

  1. openGL绘制正方形

    /** * 缓冲区工具类 */public class BufferUtil { /**  * 将浮点数组转换成字节缓冲区  */ public static ByteBuffer arr2ByteB ...

  2. Ant 随想

    Ant是一种基于Java的build工具 面向任务构建,属性与于shell脚本中命令功能类型. <?xml version="1.0"?> <project na ...

  3. visual c++ 动态链接库调用总结

    由于每次使用动态链接库的时候都要重新去查资料,查调用方式,有些烦躁,本人抽点时间在此做个总结,希望可以对需要的朋友有所帮助. 1,显式加载方式加载动态链接库 简单易懂,随掉随用 (1)         ...

  4. 【ios开发】自定义Actionsheet实现时间选择器和省市区选择器

    最近的工程有一个个人资料页面,需要填写生日和地区的信息,需要自己定义个actionsheet. 但是到网上搜了一下都不太合适,只好自己研究研究,重写了一个.共享出来给大家用用,突然发现自己精神很高尚吗 ...

  5. Word2Vec在中文的应用

    google最近新开放出word2vec项目,该项目使用deep-learning技术将term表示为向量,由此计算term之间的相似度,对term聚类等,该项目也支持phrase的自动识别,以及与t ...

  6. [转]Blocking Code Injection on iOS and OS X

    Source:http://www.samdmarshall.com/blog/blocking_code_injection_on_ios_and_os_x.html Yesterday I pos ...

  7. Easyui表单验证扩展

    简介: 使用Easyui,我们省了好多事情,不用为UI费心,只需要关注业务层面即可,下面是一些常用的验证方面的扩展,收藏下自己用 //重载$.fn.validatebox.defaults.rules ...

  8. C#山寨版本拨号客户端

    C#山寨版本[天翼拨号客户端]---内含详细抓包,模拟数据---万事俱备,只欠东风.   本帖子本来最初是发在CSDN上的,回复的也有十几个,但没有一个有技术含量的回复....特来此讨论,请教,请各位 ...

  9. Myeclipse新建 配置Hibernate

    一.新建一个JAVA项目 二.选中新建的项目单击右键[Add Hibernate Capab-] 三.添加MyEclipse Hiberate Libaries(Hibernate 3.2) 单击[B ...

  10. SQL拼接方法

    smark Beetle可靠.高性能的.Net Socket Tcp通讯组件 另类SQL拼接方法 在编写SQL的时候经常需要对SQL进行拼接,拼接的方式就是直接String+处理,但这种情况有个不好的 ...