上一篇讲了自定义Directive,本篇是要讲到AngularJS的Filter。 Filter简介Filter是用来格式化数据用的。Filter的基本原型( ‘|‘ 类似于Linux中的管道模式):{{ expression | filter }}Filter可以被链式使用(即连续使用多个filter):{{ expression | filter1 | filter2 | ... }}Filter也可以指定多个参数:{{ expression | filter:argument1:argument2:... }} AngularJS内建的FilterAngularJS内建了一些常用的Filter,我们一一...
本文主要介绍了AngularJS中下拉框的基本用法,结合具体实例形式分析了AngularJS下拉框的元素绑定、选中及显示等功能实现方法,需要的朋友可以参考下,希望能帮助到大家。HTML正文:<p ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names"></select>
等价于:
<select>
<option ng-repeat="item in names">{{item}}</option>
</select>
<hr>
<!-- ng-repeat绑定的值为一个字符串,...
在AngularJS中$interval用来处理间歇性处理一些事情。
最常用的是:var app = angular.module("app",[]);
app.controller("AppCtrl", function($q. $interval){
var timer = $interval(function(){
},100);
timer.then(success);
function success(){
console.log("done");
}
}) 以上,每隔100毫秒就做一件事,所有都昨晚在调用then函数。也就是,$interval提供回调函数。
是否可以控制做事的次数呢?--可以的。
var timer = $inte...
简介
为什么使用resolve: 当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来。但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现出数据。这样就会导致页面会被渲染两遍,导致“页面UI抖动”的问题,对用户不太友好。resolve的出现解决了这个问题。 resolve是干嘛用的: resolve属性里的值会在路由成功前被预先设定好,然后注入到...
ng-animate
本文讲一下Angular中动画应用的部分。
首先,Angular本生不提供动画机制,需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制,Angular也不提供具体的动画样式,所以说,它的自由度和可定制性挺大的。
那么,刚开始需要在项目的入口html文件中引入Angular框架(angular.js),然后引入angular.animate.js。
在项目的js入口文件app.js中,新建项目模块,并且添加所依赖的模块ng-Animate(有其他需要的模块...
本文实例讲述了angular2中Http请求原理与用法。分享给大家供大家参考,具体如下:
提供HTTP服务
HttpModule并不是Angular的核心模块。 它是Angular用来进行Web访问的一种可选方式,并位于一个名叫@angular/http的独立附属模块中.
编辑app.module.ts
import { HttpModule, JsonpModule } from @angular/http;
@NgModule({imports: [HttpModule,JsonpModule],
})angular-in-memory-web-api
npm install angular-in-memory-web-api --...
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐视频大漠穷秋 Angular实战 由于篇幅过长,列举大纲如下:一、指令directive概述
指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性。不同于jQuery,Angular设计核心思想是通过数据与模板的绑定,摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上。
几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app="my...
前言
html中的属性很多,同样可以使用angularjs来定义:
ng-attr-(suffix)=只能使用变量定义<div title="angularjs中的title">title</div>
<div ng-attr-title="angularjs中的title">title</div><!--这样写显示不出来标题-->
<div ng-attr-title="angularjs中的title">title</div><!--这样写显示不出来标题-->
<div ng-attr-title="{{titleStr}}">title</div><!--只能使用变量定义-->
angular.module(myApp,[]).controller(myCtrl,...
AngularJS extend用法
angular.extend:依次将第二个参数及后续的参数的第一层属性(不管是简单属性还是对象)拷贝赋给第一个参数的第一层属性,即如果是对象,则是引用的是同一个对象,并返回第一个参数对象。 实例一:var r = angular.extend(b, a);将对象a的第一层属性(不管是简单属性还是对象)拷贝赋给对象b的第一层属性,即如果是对象,则是引用的是同一个对象,并返回对象bJs代码
var a = { name : bijian, addr...
本文实例讲述了AngularJS模板加载用法。分享给大家供大家参考,具体如下:
angular模板加载 ----ng-template
AngularJS作为mvc(或者说mvvm)框架,同样具备模板这一基本概念。
NG加载模板的顺序为 内存加载---AJAX加载。
内存加载
如果之前使用过Bootstrap 插件的ng版,即angular-ui,就会了解到这种方式的具体应用。模板本质上是字符串,把字符串直接写入内存,加载时直接从内存获取,速度会更快,有两种方式显式启用内存加载。
通...
本文实例讲述了AngularJS指令用法。分享给大家供大家参考,具体如下:
指令(directives)是任何AngularJS应用中最重要的成分。尽管AngularJS已经自带了很多指令,你经常会发现需要自己亲手创建一些特别的指令。本文将会带你了解自定义指令并解释如何在现实世界中的Angular项目中使用它们。文章的最后,我们将一起用Angular指令来创建一个简单的笔记小应用。
综述
一个指令就是一个引入新语法的东西。指令是在DOM元素上做的标记,并...
本文实例讲述了AngularJS中transclude用法。分享给大家供大家参考,具体如下:
Transclude - 在Angular的指令中,大家会看到有一个这样的一个配置属性,这个单词在英文字典里面也查询不到真实的意思,所以就用英文来标示它吧。如果你深入的使用angular的话,你就花很大一部分时间来创建自定义指令,那么就不可避免的要深入理解transclude。简单的讲,transclude主要完成以下工作,取出自定义指令中的内容(就是写在指令里面的子元素...
最近在angular中使用select指令时,出现了很多问题,搞得很郁闷。查看了很多资料后,发现select指令并不简单,决定总结一下。select用法:
<select
ng-model=""
[name=""]
[required=""]
[ng-required=""]
[ng-options=""]>
</select> 属性说明:发现并没有ng-change属性ng-required:当属性值为true时,对select添加required验证,为false时不验证。ng-options:指定数据源,生成option选项。数据源为数组时,用法:label for v...
在AngularJS中$interval用来处理间歇性处理一些事情。
最常用的是:
var app = angular.module("app",[]);
app.controller("AppCtrl", function($q. $interval){
var timer = $interval(function(){
},100);
timer.then(success);
function success(){
console.log("done");
}
}) 以上,每隔100毫秒就做一件事,所有都昨晚在调用then函数。也就是,$interval提供回调函数。
是否可以控制做事的次数呢?
--可以的。
var timer = $in...