简介

以 JavaScript 编写的库，是一个 JavaScript 框架

一、表达式

AngularJS 使用 表达式 把数据绑定到 HTML。

  • 表达式写在双大括号内：{{ expression }}。
  • 表达式把数据绑定到 HTML，与 ng-bind 指令有异曲同工之妙。
  • 将在表达式书写的位置"输出"数据。
  • 它们可以包含文字、运算符和变量。实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }

二、指令

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

ng-app 初始化一个 AngularJS 应用程序（告诉 AngularJS，ng-app所在元素是 AngularJS 应用程序 的"所有者"。）

<div ng-app="" ng-init="firstName='John'">

     <p>在输入框中尝试输入：</p>

     <p>姓名：<input type="text" ng-model="firstName"></p>

     <p>你输入的为： {{ firstName }}</p>

</div>
ng-init 定义初始值
ng-model

把元素值（比如输入域的值）绑定到应用程序。用于表单元素的，支持双向绑定（在修改输入域的值时， AngularJS 属性的值也将修改：）。对普通元素无效（{数据绑定：{ firstName }} 是通过 ng-model="firstName" 进行同步。）

模型

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值

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

    名字: <input ng-model="name">

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.name = "John Doe";

});

</script>
<form ng-app="" name="myForm">

    Email:

    <input type="email" name="myAddress" ng-model="text">

    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

</form>

验证用户输入

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

    Email:

    <input type="email" name="myAddress" ng-model="myText" required></p>

    <h1>状态</h1>

    {{myForm.myAddress.$valid}}

    {{myForm.myAddress.$dirty}}

    {{myForm.myAddress.$touched}}

</form>

应用状态

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

  • ng-empty
  • ng-not-empty
  • ng-touched布尔值属性，表示用户是否和控件进行过交互
  • ng-untouched
  • ng-valid布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true
  • ng-invalid未通过验证的表单
  • ng-dirty布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过
  • ng-pending
  • ng-pristine布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过
ng-repeat 对于集合中（数组中）的每个项会 克隆一次 HTML 元素

<div data-ng-app="" data-ng-init="names=['Jani1','Hege','Kai']">

  <p>使用 ng-repeat 来循环数组</p>

  <ul>

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

      {{ x }}

    </li>

  </ul>

</div>

创建自定义指令：

  • 使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
  • 元素<runoob-directive></runoob-directive>
  • 只能通过属性的方式来调用，restrict : "E",
<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        template : "<h1>自定义指令!</h1>"

    };

});

</script>
  • 属性<div runoob-directive></div>
  • 只能通过属性的方式来调用，restrict : "A",
<body ng-app="myApp">

<div runoob-directive></div>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        template : "<h1>自定义指令!</h1>"

    };

});

</script>
  • 类名<div class="runoob-directive"></div>
  • 只能通过属性的方式来调用，restrict : "C",
<body ng-app="myApp">

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

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        restrict : "C",

        template : "<h1>自定义指令!</h1>"

    };

});

</script>
  • 注释<!-- directive: runoob-directive -->
  • 只能通过属性的方式来调用，restrict : "M",
<body ng-app="myApp">

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

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        restrict : "M",

        replace : true,

        template : "<h1>自定义指令!</h1>"

    };

});

</script>

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

angularJS（一）：表达式、指令的更多相关文章

  1. AngularJS 简介、指令、表达式

    AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...

  2. AngularJS的表达式、指令的学习（2）

    最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...

  3. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  4. 使用Angularjs的ng-cloak指令避免页面乱码

    在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...

  5. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  6. 你知道用AngularJs怎么定义指令吗？

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

  7. Ⅵ.AngularJS的点点滴滴-- 指令

    指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...

  8. AngularJS创建新指令 - 基本功能

    指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令. AngularJS原有的指令 ng-init  ...

  9. AngularJS：表达式

    ylbtech-AngularJS:表达式 1.返回顶部 1. AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS ...

  10. [转]你知道用AngularJs怎么定义指令吗？--很详细

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

随机推荐

  1. C++ - C++简介

    一.C与C++ 一般来说,计算机要处理两个概念--算法和数据.C在面世时是过程性的语言,过程性的语言指的是程序的过程较比其他语言,会更加的有序可读(清晰性和可读性).因为它把程序分解成各个分支,并执行 ...

  2. MongoDB基本操作(增删改查)

    基本操作      基本的“增删查改“,在DOS环境下输入mongo命令打开shell,其实这个shell就是mongodb的客户端,同时也是一个js的编译器,默认连接的是“test”数据库.  

  3. 185.[USACO Oct08] 挖水井 (第三次考试大整理)

    185. [USACO Oct08] 挖水井 输入文件:water.in   输出文件:water.out   简单对比 时间限制:1 s   内存限制:128 MB 农夫约翰决定给他的N(1< ...

  4. CF191C Fools and Roads - 树剖解法

    Codeforces Round #121 (Div. 1) C. Fools and Roads time limit per test :2 seconds memory limit per te ...

  5. 苹果cms开启防红跳转后，提示模板文件不存在解决方法

    1,苹果cms开启防红跳转后,提示模板文件不存在(如下图)这是因为你使用的模板里面缺少苹果cms自带的防红跳转模板导致,遇到这种状况后需要把苹果cms默认自带的( template/default_p ...

  6. CSS 处理溢出强行换行

    CSS折行样式 word-break:break-all;允许单词拆分折行 word-break:keep-all;只能在半角空格或连字符处换行. word-wrap:break-word;在长单词或 ...

  7. [POJ2942]:Knights of the Round Table（塔尖+二分图染色法）

    题目传送门 题目描述 亚瑟王要在圆桌上召开骑士会议,为了不引发骑士之间的冲突,并且能够让会议的议题有令人满意的结果,每次开会前都必须对出席会议的骑士有如下要求: .相互憎恨的两个骑士不能坐在直接相邻的 ...

  8. Http协议：客户端提交数据给服务端和从服务端获得数据，像WebView也是向百度的服务端发出一条Http请求，服务端返回HTML页面，客户端（浏览器）解析后展示出页面

    提交数据和获得数据的方式有很多,这里介绍一种,使用HttpURLConnection来向服务器提交数据或者获得数据. 获得数据: //传入网址,获得请求网页数据(XML文件数据或JSON文件数据) p ...

  9. mysql学生成绩排名,分组取前 N 条记录

    转载  https://blog.csdn.net/jslcylcy/article/details/72627762 score表: CREATE TABLE `score` ( `student_ ...

  10. leetcode 27. 移除元素（python）

    1. 题目描述 给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外 ...