angularjs笔记二

9、ng-repeat

ng-repeat 指令用在一个对象数组上

比如：

<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>

注意：ng-init 指令为 AngularJS 应用程序定义了 初始值。通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。稍后您将学习更多有关控制器和模块的知识。

10、 .directive 函数

调用自定义指令，HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令，

runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

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

  • 元素名

<runoob-directive></runoob-directive>

  • 属性

<div runoob-directive></div>

  • 类名

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

  • 注释

<!--
指令:
runoob-directive -->

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

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

可以使用一个或者多个一起使用，比如：EAC，没有声明的话，默认都可以

比如：

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

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

return {

restrict
: "A",

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

};

});

11、验证 (ng-model)

（1）  
必填项

<input id="name"  required  ng-model=‘user.name‘ />

（2）  
最小长度

<input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" />

（3）   最大长度

<input type="text" id="maxlength" ng-maxlength="20" ng-model="user.maxlength" />

（4）   模式匹配

    <input type="text" id="minlength" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" />

（5）   电子邮件

<input type="email" id="email" name="email" ng-model="user.email" />

（6）   数字

<input type="number" id="age" name="age" ng-model="user.age" class="form-control" />

（7）   url

<input type="url" id="url" name="homepage" ng-model="user.url" class="form-control" />

比如：验证用户输入

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

Email:

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

<span ng-show="myForm.myAddress.$error.email">

不是一个合法的邮箱地址

</span>

</form>

12、状态值(invalid, dirty, touched, error)

比如：

<form ng-app="" name="myForm" ng-init="myText = ‘[email protected]‘">

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

<h1>状态</h1>

{{myForm.myAddress.$valid}} (如果输入的值是合法的则为
true)

{{myForm.myAddress.$dirty}} (如果值改变则为 true)

{{myForm.myAddress.$touched}} (如果通过触屏点击则为
true)

{{ myForm.myAddress.$error.email }}

</form>

13、css类

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类

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

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

比如：

<style>

input.ng-invalid {

background-color: lightblue;

}

</style>

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

<input name="myAddress" ng-model="text" required>

</form>

14、Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象，有可用的方法和属性。Scope 可应用在视图和控制器上

比如：（Scope 作用范围）

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

<ul><li ng-repeat="x in names">{{x}}</li></ul>

</div>

<script>

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

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

$scope.names = ["Emil", "Tobias", "Linus"];

});

</script>

根作用域：

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用
rootscope 定义的值，可以在各个
controller 中使用

比如：

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

<h1>{{lastname}}式家族:</h1>

<ul> <li ng-repeat="x in names">{{lastname}}{{x}} </li></ul>

</div>

<script>

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

app.controller(‘myCtrl‘, function($scope, $rootScope) {

$scope.names = ["一", "二", "三"];

$rootScope.lastname = "蔡";

});

</script>

15、控制器方法

比如：

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

名: <input type="text" ng-model="firstName"><br>

姓: <input type="text" ng-model="lastName"><br>

<br>姓名: {{fullName()}}</div>

<script>

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

app.controller(‘personCtrl‘, function($scope) {

$scope.firstName = "一";

$scope.lastName = "蔡";

$scope.fullName = function()
{

return $scope. lastName + " " + $scope. firstName;

}

});

</script>

16、过滤器


过滤器
描述

currency
格式化数字为货币格式。

filter
从数组项中选择一个子集。

lowercase
格式化字符串为小写。

orderBy
根据某个表达式排列数组。

uppercase
格式化字符串为大写。

使用方法：

（1）  {{ price | currency }}

（2）  {{ lastName | lowercase }

（3）  {{ lastName | uppercase }

（4）   <li ng-repeat="x in names |
orderBy:‘country‘">

{{ x.name + ‘, ‘ + x.country }}

</li>

（5）   <li ng-repeat="x in names | filter:test | orderBy:‘country‘">

{{ (x.name | uppercase) + ‘, ‘ + x.country }}

</li>

17、angularjs服务（service）

(1)$location

注意:$location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义

(2)$http

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

app.controller(‘myCtrl‘, function($scope, $http) {

$http.get("welcome.htm").then(function (response)
{

$scope.myWelcome = response.data;

});

});

(3)$timeout

$timeout(function ()
{

$scope.myHeader = "How
are you today?";

}, 2000);

注意： 取消： $timeout.cancel();

(4)$interval

$interval(function ()
{

$scope.theTime = new Date().toLocaleTimeString();

}, 1000);

注意：取消定时器： $interval.cancel();

(5)自定义服务

创建名为hexafy 的访问:

app.service(‘hexafy‘, function() {

this.myFunc
= function (x) {

return x.toString(16);

}

});

app.controller(‘myCtrl‘, function($scope, hexafy) {

$scope.hex = hexafy.myFunc(255);

});

(6)过滤器中使用自定义服务

在过滤器 myFormat 中使用服务 hexafy:

app.filter(‘myFormat‘,[‘hexafy‘, function(hexafy) {

return function(x) {

return hexafy.myFunc(x);

};

}]);

在对象数组中获取值时你可以使用过滤器

<ul>

<li ng-repeat="x in counts">{{x | myFormat}}</li>

</ul>

18、$http

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

<ul>

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

{{ x.Name + ‘, ‘ + x.Country }}

</li>

</ul>

</div>

<script>

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

app.controller(‘customersCtrl‘, function($scope,
$http) {

$http.get("a.json")

.success(function(response)
{$scope.names = response.records;});

});

</script>

19、select

使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出

比如：

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

<select ng-model="selectedName" ng-options="x for
x in names">

</select></div>

<script>

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

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

$scope.names = ["Google", "Runoob", "Taobao"];

});

</script>

也可以使用ng-repeat 指令来创建下拉列表

比如：

<select>

<option ng-repeat="x in
names">{{x}}</option>

</select>

注意：ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

将数据对象作为数据源：

<select ng-model="selectedSite" ng-options="x for (x, y)
in sites">

</select>

20、tabel

(1)$index(位置)

表格显示序号可以在 <td> 中添加 $index

       (2)$even 和
$odd

比如：

<table>

<tr ng-repeat="x in
names">

<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>

<td ng-if="$even">{{ x.Name }}</td>

<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>

<td ng-if="$even">{{ x.Country }}</td>

</tr>

</table>

21、ng-disabled

22、ng-show

ng-show 指令隐藏或显示一个 HTML 元素，ng-show=”true”时显示，反之，则隐藏

除此之外，也可以通过使用表达式来计算布尔值（ true 或 false）

比如：

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">我是可见的。</p>

</div>

23、ng-hide

24、事件

ng-click点击事件

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

<button ng-click="count = count + 1">点我！</button>

<p>{{ count }}</p>

</div>

切换：

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

<button ng-click="toggle()">>隐藏/显示</button>

<p ng-hide="myVar">

名: <input type="text" ng-model="firstName"><br>

姓名: <input type="text" ng-model="lastName"><br>

Full Name: {{firstName + " " + lastName}}

</p></div><script>

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

app.controller(‘personCtrl‘, function($scope) {

$scope.firstName =
"John",

$scope.lastName =
"Doe"

$scope.myVar = false;

$scope.toggle = function() {

$scope.myVar = !$scope.myVar;

};

});

</script>

25、angular.copy()拷贝

比如：

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

<form novalidate>

First Name:<br>

<input type="text" ng-model="user.firstName"><br>

Last Name:<br>

<input type="text" ng-model="user.lastName">

<br><br>

<button ng-click="reset()">RESET</button>

</form>

<p>form = {{user}}</p>

<p>master = {{master}}</p>

</div>

<script>

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

app.controller(‘formCtrl‘, function($scope) {

$scope.master = {firstName:
"John", lastName: "Doe"};

$scope.reset = function() {

$scope.user = angular.copy($scope.master);

};

$scope.reset();

});

</script>

26、AngularJS 全局 API


API
描述

angular.lowercase()
转换字符串为小写

angular.uppercase()
转换字符串为大写

angular.isString()
判断给定的对象是否为字符串，如果是返回 true。

angular.isNumber()
判断给定的对象是否为数字，如果是返回 true。

27、ng-include

使用该指令来包含html内容

比如：

<div class="container">

<div ng-include="‘myUsers_List.htm‘"></div>

</div>

28、AngularJS动画

需要引入angular-animate.min.js
库

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

还需在应用中使用模型 ngAnimate：

<body ng-app="ngAnimate">

不过：如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中

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

ngAnimate
模型可以添加或移除 class 。ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生
ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

29、依赖注入(配置)

以下5个核心组件用来作为依赖注入：

  • value
  • factory
  • service
  • provider
  • constant

（1）  value

// 创建 value 对象 "defaultInput" 并传递数据

mainApp.value("defaultInput", 5);

// 将 "defaultInput" 注入到控制器

mainApp.controller(‘CalcController‘, function($scope, CalcService, defaultInput) {

});

（2）  factory

  • factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
  • 通常我们使用 factory 函数来计算或返回值

// 创建 factory "MathService" 用于两数的乘积

mainApp.factory(‘MathService‘, function() {

var factory = {};

factory.multiply = function(a, b) {

return a * b

}

return factory;

});

（1）  service

// 在 service 中注入 factory "MathService"

mainApp.service(‘CalcService‘, function(MathService){

this.square = function(a) {

return MathService.multiply(a,a);

}

});

（2）  provider

  • 通过 provider
    创建一个 service、factory等(配置阶段)。
  • Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory

// 使用 provider 创建 service 定义一个方法用于计算两数乘积

mainApp.config(function($provide) {

$provide.provider(‘MathService‘, function() {

this.$get = function() {

var factory = {};

factory.multiply = function(a, b) {

return a * b;

}

return factory;

};

});

});

（1）  constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的

mainApp.constant("configParam", "constant
value");

30、ng-switch

ng-switch 指令根据表达式显示或隐藏对应的部分。对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

比如：

<div ng-app="">

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

<div ng-switch="name">

<div ng-switch-when="hello">hello</div> // 匹配，显示

<div ng-switch-when="world">world</div> // 匹配，显示

<div ng-switch-default>default</div> // 不匹配，显示默认值

</div>

</div>

31、ng-method

(1)
angular.element 将原声对象转化成jq对象

其中： div1是id


angular.element(div1).html(‘123‘);

angular.element(div1).css(‘fontSize‘,‘40px‘);

(2)判断两个值是否相等

angular.equals(NaN,NaN)

(3)对象的继承angular.extend


var a = {‘name‘:1};

var b = {‘age‘:2};

var c = {};

//把后面的给前面的

angular.extend(c,a,b);

(4)fromJson  toJson


var json = ‘{"age":1,"name":2}‘;

//变成对象fromJson

json = angular.fromJson(json);

//变成字符串格式

json = angular.toJson(json);

(5)复制属性


var a = {‘name‘:1};

var b = {‘age‘:2};

angular.copy(a,b);//把a的值粘贴到b上 b的旧值消失了

（6）  遍历方法


var arr = [{name:1},{name:2},{name:3}];

//angular中的遍历方法

var result = [];

angular.forEach(arr, function (item) {

this.push(item.name);//以result为this指向

},result);

（7）  绑定


function cb(){

console.log(this.name);

}

var obj = {name:1};

var c = angular.bind(obj,cb);//第一个是当前this对象，要绑定的函数

c();

32、通过指定的属性遍历(track by) ---有错，不知道为什么

<div ng-init="phones=[‘三星‘,‘华为‘,‘苹果‘,‘苹果‘]">

<div
ng-repeat="phone in phones track by $index">

{{phone}}

</div>

</div>

33、ng-if

条件不成立的时候，命令不执行，并且会移出元素

34、run

//在执行的时候配置全局变量$rootScope(会先执行run方法)

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

app.run([‘$rootScope‘,function
($rootScope) {

$rootScope.name = {name:2};

}]);

假设我们需要在每次路由发生变化时，都执行一个函数来验证用户的权限，放置这个功能唯一合理的地方就是run方法：

angular.module(‘myApp‘, [‘ngRoute‘])

.run(function($rootScope, AuthService) {

$rootScope.$on(‘$routeChangeStart‘, function(evt, next, current)
{

// 如果用户未登录

if (!AuthService.userLoggedIn()) {

if (next.templateUrl
=== "login.html") {

// 已经转向登录路由因此无需重定向

} else {

$location.path(‘/login‘);

}

}

});

});

35、监听（watch）


//写法1

$scope.$watch(function () {

//用这种方法的时候增加return

//当外层函数执行的时候，让里面的函数执行了，加上return后表示监控的是total执行后的结果

return $scope.total();

}, function (newVal,oldVal) {

$scope.product.post=newVal>=100?0:10;

});

//写法2

/*$scope.$watch($scope.total, function
(newVal,oldVal) {

$scope.product.post=newVal>=100?0:10;

});*/

//第一个参数可以放model的名字 错误的‘total‘

//放函数 函数执行后的结果返回$scope上的变量

//还可以直接监控$scope.total方法

36、ng-href/ng-src

比如：

<a ng-href="{{src}}">go！！！</a>


var app = angular.module(‘appModule‘,[]);

app.controller(‘ctrl‘, function ($scope,$timeout) {

$timeout(function () {

//别忘了加协议

$scope.src = ‘http://www.baidu.com‘;

},5000);

});

37、ng-model-options

38、Controller
间通信机制

39、配置（config()）

在模块的加载阶段，AngularJS会在提供者注册和配置的过程中对模块进行配置。在整个AngularJS的工作流中，这个阶段是唯一能够在应用启动前进行修改的部分。

时间： 2024-08-20 04:23:37

angularjs笔记二的相关文章

angularjs 学习笔记(二) ----- bootstrap框架

1.  下载新的jquery-1.11.1文件. 2.  下载新的bootstrap文件. 3.  选择流式布局的模板填充入index.html文件. 4.  将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5

angular学习笔记(二十四)-$http(2)-设置http请求头

1. angular默认的请求头: 其中,Accept 和 X-Requested-With是$http自带的默认配置 2. 修改默认请求头: (1) 全局修改(整个模块) 使用$httpProvider依赖 var myApp = angular.module('MyApp',[]); myApp.config(function($httpProvider){ console.log($httpProvider.defaults.headers.common) //修改/操作$httpProv

老男孩培训视频听课笔记二（在51cto上听的）

centos 5.8 文本安装过程    引导采用默认,引导不用设置密码    网络配置,根据实际情况配置,网关是网络出口的地址,一般为wlan出口的路由器的地址或者是代理服务器的内网IP    DNS简单解说图:      主机名--时区--root密码    选择自定义系统安装包--最小化(安全方便工作,建议安装以下的组)      ·base-- 基础      ·editors-编辑器      ·development librarays--开发库      ·development

《卓有成效的程序员》----读书笔记二

六大方面对比Launchy和TypeAndRun(TAR) 对于快速启动工具,很多人都有自己的偏好,多次听到朋友介绍Launchy的好,虽然自己一直在使用着TAR,还是克制不住对于好软件的渴求,下载Launchy进行试用.很多软件都是有一个试用期的,也许新的软件确实不错,但是你习惯了以前使用的那个软件.今天就比较客观的将Launchy和TAR进行一下对比,从界面.上手速度到功能.自定义,以及软件的稳定性.占用资源进行详细的比较. [界面美观]Launchy:毫无疑问这是它的强项.1.0正式版自带

Caliburn.Micro学习笔记(二)----Actions

Caliburn.Micro学习笔记(二)----Actions 上一篇已经简单说了一下引导类和简单的控件绑定 我的上一个例子里的button自动匹配到ViewModel事件你一定感觉很好玩吧 今天说一下它的Actions,看一下Caliburn.Micro给我们提供了多强大的支持 我们还是从做例子开始 demo的源码下载在文章的最后 例子1.无参数方法调用 点击button把textBox输入的文本弹出来 如果textbox里没有文本button不可点,看一下效果图 看一下前台代码 <Stac

《逻辑思维简易入门》（第2版） 阅读笔记二

<逻辑思维简易入门>(第2版) 阅读笔记二 本周阅读的是<逻辑思维简易入门>的第三章,也就是说,本书的第一部分就已经读完了. 第三章.信念的优点 信念和负信念是人们在接受一个事物时一种心理态度,延伸来说也就是对事物的认知态度.因为我们在研究 逻辑思维的时候,都有一个前提:“以正常情况以及说话者真诚”,所以有人如果对于一件事物不做回应,我们可以认为这是一种既不相信,也不怀疑的的态度. 信念的优缺点有很多,在书中主要介绍了下面几种: 1.准确性 好的信念实在准确的表达事实,同样真的信念

2. 蛤蟆Python脚本学习笔记二基本命令畅玩

2. 蛤蟆Python脚本学习笔记二基本命令畅玩 本篇名言:"成功源于发现细节,没有细节就没有机遇,留心细节意味着创造机遇.一件司空见惯的小事或许就可能是打开机遇宝库的钥匙!" 下班回家,咱先来看下一些常用的基本命令. 欢迎转载,转载请标明出处:http://blog.csdn.net/notbaron/article/details/48092873 1.  数字和表达式 看下图1一就能说明很多问题: 加法,整除,浮点除,取模,幂乘方等.是不是很直接也很粗暴. 关于上限,蛤蟆不太清楚

Emacs 笔记二

Emacs 笔记二 Table of Contents 1. 前言 2. emacs基本操作(常用快捷键) 3. emacs模式讲解 4. emacs缓冲区 5. org mode 5.1. 列表 5.2. 快键键 5.3. 内嵌元素(插入代码什么的) 5.4. 表格 1 前言 最近在学着写博客,发现MarkDown真乃神器,于是去找了很多markdown的工具,发现作业部落 最好的那个,而无意间又发现了org-mode火爆到极致 非常被人推崇,其实作业部落 已经是能很完美的满足我的需求了,但是

《Programming in Lua 3》读书笔记(二十二)

日期:2014.8.6 PartⅣ The C API 26 Extending Your Application 使用Lua很重要的一点是用来做配置语言.配合主语言做一些功能的配置. 26.1 The Basics 有的时候程序需要配置一些功能信息,很多时候可能有许多别的方法比用lua做配置要更简单:如使用环境变量或者读取文件,读取文件涉及到文件的解析.如果使用Lua进行配置的话,相当于用lua文件替代了要读取的如csv.txt文件等. 使用Lua进行配置的时候,就需要使用Lua API去控制