Angularjs基础(四)
AngularJS过滤器
过滤器可以使用一个管道符(|)添加到表达式和指令中。
AngularJS过滤器可用于转换数据:
currency 格式化数字为货币格式
filter 从数组中选着应子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组
uppercase 格式化字符串为大写。
表达式中添加过滤器
过滤器可以通过一个管道字符(|) 和一个过滤器添加到表达式中。
uppercase过滤器将字符串格式化为大写。
实例:
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名{{lastName | uppercase}}</p>
</div>
lowercase 过滤器将字符串格式化为小写
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为{{lastName | lowercase}}</p>
</div>
currency 过滤器
currency 过滤器将数字格式化为货币格式:
实例:
<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>总价={{(quantity * price) | currency}}</p>
</div>
向指令添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中
orderBy 过滤器根据表达式排列数组:
实例:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in name | orderBy:'country'">
{{x.name +','+ x.country}}
</li>
</ul>
</div>
过滤输入
输入过滤器可以通过一个管道符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和模型名称。
filter过滤器从数组中选着一个子集:
实例
<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:'countery'">
{{(x.name | uppercase) +','+x.counry}}
</li>
</ul>
</div>
AngularJS服务(Service)
AngularJS 中你可以创建自己的服务,或使用内创建服务。
什么是服务?
在AngularJS中,服务是一个函数或对象,在你的AngularJS 应用中使用。
有个$location 服务,他可以返回当前页面的URL地址。
实例:
var app = angular.module('myApp',[]);
app.controller('customersCtrl',function($scope,$location){
$scope.myUrl = $location.absUrl();
})
注意:$location 服务是作为一个参数传递到controller中.如果要使用它,需要在controller中定义。
为什么使用服务?
$http 是AngularJS 应用中最常用的服务。服务向服务器发送请求,应用响应服务器传送过来的数据。
AngularJS 会一直监控应用,处理事件变化,AngularJS使用 $location 服务比使用window.location 对象更好。
$http 服务
$http 是AngularJS 应用中做常用的服务。服务像服务器发送请求。应用响应服务器传递过来的数据。
实例:
使用$http 服务器服务器请求数据:
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$http){
$http.get("welcome.html").then(function(response){
$scope.myWelcome = response.data;
});
});
$timeout 服务
AngularJS $timeout 服务对应了JSwindow.setTimeout 函数
实例:
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$timeout){
$scope.myHeader = "Hello World!";
$timeout(function(){
$scope.myHeader = "How are you today?";
},2000)
})
$interval 服务
AngularJS $interval 服务对应了JS window.setInterval 函数。
实例: 每两秒显示信息:
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$interval){
$scope.theTime = new Date().toLocaleTimeString();
$interval(function(){
$scope.theTime = new Date().toLocaleTimeString();
},1000)
})
创建自定义服务
你可以创建自定义的访问,链接到你的模块中:
创建名为hexafy 访问:
app.service('hexafy',function(){
this.myFunc = function(x){
this.myFunc = function (x){
return x.toString(16);
}
}
});
要使用自定义的访问,需要在定义过滤器的时候独立添加:
实例:
使用自定义的服务hexafy 将一个数组转换为16 进制。
app.controller('myCtrl',function($scope,hexafy){
$scope.hex = hexafy.myFunc(255);
})
过滤器中,使用自定服务
当你创建了自定义服务器,并连接到你的应用上后,你可以在控制器,指令,过滤器或其他服服务器中使用它。
在过滤器myFormat 中使用服务hexafy:
app.filter('myFormat',['hexify',function(hexify){
return function(x){
return hexify.myFunc(x);
};
}])
在从对象会数组中获取值时你可以使用过滤器:
创建服务hexafy:
<ul>
<li ng-repeat ="x in counts">{{x | myFormat}}</li>
</ul>
AngularJS XMLHttpRequest
$http 是AngularJS 中的一个核心服务,用于读取远程服务器的数据。
读取JSON 文件
以下是存储在web服务器上的JSON 文件
{
"records":
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbk?p",
"City" : "Lule?",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "K?niglich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "K?benhavn",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "?rhus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
}
AngularJS $http
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url)是用于读取服务器数据的函数。
实例:
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in name">
{{x.Name + ','+x.Country}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('customersCtrl',function($scope,$http){
$http.get("http:www.runoob.com/try/angularjs/data/Customes_JSON.php")
. success(function(response) {$scope.names = response.records;});
})
</script>
应用解析:
注意:以上代码的get请求是本站的服务器,你不能直接拷贝到你本地运行,会存在跨域问题,解决办法就是将Customers_JSON.php
的数据拷贝到你 的服务器上。
AngularJS 应用通过ng-app 定义,应用在<div>中执行。
ng-controller指令设置了controller对象名。
函数customersController是一个标准的JavaScript对象构造器。
控制器对象有一个属性:$scope.names.
$http.get()从web服务器上读取静态JSON 数据。
服务器数据文件为: http://www.runoob.com/try/angularjs/data/Customers_JSON.php。
当从服务端载入JSON 数据时,$scope.names变为一个数组。
Angularjs基础(四)的更多相关文章
- Python全栈开发【基础四】
Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...
- AngularJS基础入门初探
一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...
- Bootstrap<基础四> 代码
Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...
- Python 基础 四 面向对象杂谈
Python 基础 四 面向对象杂谈 一.isinstance(obj,cls) 与issubcalss(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls ...
- AngularJS进阶(四十)创建模块、服务
AngularJS进阶(四十)创建模块.服务 学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能 ...
- C#_02.13_基础四_.NET方法
C#_02.13_基础四_.NET方法 一.方法概述: 方法是一块具有名称的代码.可以通过方法进行调用而在别的地方执行,也可以把数据传入方法并接受数据输出. 二.方法的结构: 方法头 AND 方法 ...
- day 68 Django基础四之模板系统
Django基础四之模板系统 本节目录 一 语法 二 变量 三 过滤器 四 标签Tags 五 模板继承 六 组件 七 自定义标签和过滤器 八 静态文件相关 一 语法 模板渲染的官方文档 关 ...
- day 54 Django基础四之模板系统
Django基础四之模板系统 本节目录 一 语法 二 变量 三 过滤器 四 标签Tags 五 模板继承 六 组件 七 自定义标签和过滤器 八 静态文件相关 一 语法 模板渲染的官方文档 关于模 ...
- Django基础四之测试环境和ORM查询
Django基础四之测试环境和ORM查询 目录 Django基础四之测试环境和ORM查询 1. 搭建测试环境 1.1 测试环境搭建方法: 1.2 使用测试环境对数据库进行CURD 1.3 返回Quer ...
随机推荐
- PAT 1064 Complete Binary Search Tree
#include <iostream> #include <cstdio> #include <cstdlib> #include <vector> # ...
- 【代码笔记】Java学习一阶段总结
写笔记需要打开eclipse写 哈哈哈哈,不然写什么都屡不清了 ……还需要打开API说明文档. JFrame 窗体组件. JFrame里面常用的函数: setSize 设置窗体大小 setDefaul ...
- html中通过移除空格的方法来解决浏览器上的留白间距该怎么理解?
今天在切图的时候,碰到一个兼容性的问题,很幸运最后通过张金鑫老师的文章解决了这个问题!但在阅读张老师文章的时候,我有个地方不明白,在网上查了下也没找到我想要的答案,后来自己想了半天好像是这么回事,现在 ...
- 【起航计划 036】2015 起航计划 Android APIDemo的魔鬼步伐 35 App->Service->Messenger Service Messenger实现进程间通信
前面LocalService 主要是提供同一Application中组件来使用,如果希望支持不同应用或进程使用Service.可以通过Messenger.使用Messgener可以用来支持进程间通信而 ...
- 向jsp页面传值时出现乱码
在一个html页面中用表单向jsp页面传值: 这是html页面 <html> <head> <title>MyBeans.html</title> &l ...
- selendroid之toast处理
最近发现原来处理toast的操作失效了.仔细看了下原来的API.决定用switchTo来解决.driver.switchTo().defaultContent().findElement(By.id( ...
- Linux文件寻址算法:逻辑地址到物理地址的转换
题目描述: 编写一个函数实现Linux文件寻址的算法,即读取文件当前位置到物理存储位置的转换函数,需要给出运行的测试数据,可以假设和模拟需要的数据和结构.即编写一个函数unsigned long lt ...
- 【2017-06-06】Qt中的键盘事件:QKeyEvent及相关处理函数
QKeyEvent及其相关的处理函数,比如QKeyPressEvent.QKeyReleaseEvent()等在QtGui编程中非常常用,尤其是需要借助标准键盘的编码来实现一些自定义功能的时候. 这算 ...
- ORACLE常用函数汇总(持续更新中....)
在使用ORACLE过程中,把一些常用的函数的相关用法,注意事项进行简单的汇总,便于自己查询参考. DBMS_RANDOM包 dbms_random是一个可以生成随机数值或者字符串的程序包.这个包有in ...
- echarts固定柱子宽度(barWidth)
series: [ { name: '', yAxisIndex: 0, type: ' ...