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. 基于MEF的插件框架之总体设计

    基于MEF的插件框架之总体设计 1.MEF框架简介 MEF的全称是Managed Extensibility Framework(MEF),其是.net4.0的组成部分,在3.5上也可以使用.熟悉ja ...

  2. 松瀚SN8P2711 2722 ADC初始化程序及应用--汇编源码

    /* 松瀚 SN8P2711 2722 ADC初始化程序 及应用实例 */ INIT_ADC: MOV A, #0XB2 // 启动ADC电路 使能AIN通道 B0MOV ADM, A MOV A,# ...

  3. KMP算法详解-- 转自Matrix67

       6 7 8 9 --    A = a b a b  6 7  7 8 9 --    A = a b a b a  5 6 7  8 9 --    A = a b a b a b  6 7 ...

  4. 对于vijos11.2模拟赛

    特意起了个傻逼标题,只是想提醒一下自己以后不要犯逗(所以应该没有什么神犇点进来吧?) T1,T3 当场写的时候就觉得是不可写的,看了题解之后还是觉得不可写,人弱没办法.到了这个时候也懒得管这么难的东西 ...

  5. 【javascript】判断浏览设备是手机还是电脑

    判断页面浏览设备是手机还是电脑,代码如下: function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase( ...

  6. IOS学习之路八（GCD与多线程）

    GCD,全称Grand Central Dispath,是苹果开发的一种支持并行操作的机制.它的主要部件是一个FIFO队列和一个线程池,前者用来添加任务,后者用来执行任务. GCD中的FIFO队列称为 ...

  7. socket网络编程快速上手（二）——细节问题（2）

    2.TCP数据包接收问题 对初学者来说,很多都会认为:客户端与服务器最终的打印数据接收或者发送条数都该是一致的,1000条发送打印,1000条接收打印,长度都为1000.但是,事实上并不是这样,发送打 ...

  8. (Java 多线程系列)Java 线程池(Executor)

    线程池简介 线程池是指管理同一组同构工作线程的资源池,线程池是与工作队列(Work Queue)密切相关的,其中在工作队列中保存了所有等待执行的任务.工作线程(Worker Thread)的任务很简单 ...

  9. 基于easyui的webform扩展

    基于easyui的webform扩展 回顾 <前端基于easyui的mvc扩展>.<前端基于easyui的mvc扩展(续)>前两篇介绍了mvc内如何基于easyui进行扩展,在 ...

  10. SubSonic3.0配置及使用

    SubSonic3.0配置及使用 SubSonic is A Super High-fidelity Batman Utility Belt that works up your Data Acces ...