angularjs笔记(二)
4、AngularJS过滤器
使用一个管道符(|)添加到表达式和指令中
例1、格式化字母转为大写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-app="myApp" ng-controller="personCtrl"> <p>姓名为 {{ lastName | uppercase }}</p>
<input type="text" ng-model="lastName | uppercase"/>
</div> <script type="text/javascript">
angular.module('myApp',[]).controller('personCtrl',function($scope){
$scope.lastName='Joe';
});
</script> </body>
</html>
格式化为大写字母
例2、数组中过滤数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-app="myApp" ng-controller="namesCtrl"> <p>输入过滤:</p> <p><input type="text" ng-model="filter"></p> <ul>
<li ng-repeat="x in names | filter:filter | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
<p ng-repeat="x in names | filter:'L'">{{x.name}}</p>
</div> <script type="text/javascript">
angular.module('myApp',[]).controller('namesCtrl',function($scope){
$scope.names=[{name:'Lily',country:'America'},{name:'LiMing',country:'China'},{name:'John',country:'Canada'}];
});
</script> </body>
</html>
过滤数据
自定义过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-app="myApp">
自定义过滤器: <h1>{{'aaa' | myFormat}}</h1> </div> <script>
var app = angular.module('myApp', []);
app.filter('myFormat',function(){
return function(str){
return str.toUpperCase();
}
});
</script> </body>
</html>
自定义过滤器转大写
5、AngularJS服务
AngularJS创建的javascript函数或对象,作用域AngularJS应用程序内
例1、$location服务,返回当前页面URL地址。AngularJS 会一直监控应用,处理事件变化, AngularJS 使用 $location 服务比使用 window.location 对象更好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div> <p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script> </body>
</html>
$location服务
例2、$http服务,向服务器发请求,并响应返回数据
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("请求地址").then(function (response) {
$scope.responseData = response.data;
});
});
$http.get方法使用
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.post("请求地址",{键值对数据}).then(function (data, status, headers, config) { }).error(function(data, status, headers, config){ });
});
$http.post方法使用
例3、创建自定义服务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="params"/>
<h1>{{func(params)}}</h1>
<h1>{{result}}</h1>
</div>
<script>
var app = angular.module('myApp', []); app.service('selService', function() {
return function(x){
return x-0+1;
}
});
app.controller('myCtrl', function($scope, selService) {
$scope.func = selService;
$scope.result=selService(5);
});
</script> </body>
</html>
返回函数的服务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{selService.result1(5)}}</p>
<p>{{selService.result2(7)}}</p>
</div> <script>
var app = angular.module('myApp', []); app.service('selService', function() {
this.result1 = function (x) {
return x-0+1;
};
this.result2=function(x){
return x-0-1
}
});
app.controller('myCtrl', function($scope, selService) {
$scope.selService = selService;
});
</script> </body>
</html>
返回对象的服务
例3、自定义过滤器中使用自定义服务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-app="myApp">
在过滤器中使用服务: <h1>{{255 | myFormat}}</h1> </div> <script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]); </script> </body>
</html>
自定义过滤器中使用自定义服务
6、AngularJS Select
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<select ng-model="selectedName" ng-options="x for x in names"></select>
</div>
<script>
angular.module('myApp', []).controller('myController', function ($scope) {
$scope.names = ['Tom', 'John', 'Lily'];
$scope.selectedName='John';
});
</script>
</body>
</html>
ng-options创建选择框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<select ng-model="selectedName">
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script>
angular.module('myApp', []).controller('myController', function ($scope) {
$scope.names = ['Tom', 'John', 'Lily'];
$scope.selectedName='John';
});
</script>
</body>
</html>
ng-repeat创建选择框
ng-options和ng-repeat比较,ng-options更灵活一些,ng-repeat选择的是一个字符串,而ng-options对字符串数组选择的是字符串,对对象数组则选择的是对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<select ng-model="selectedSite" ng-options="x.site for x in sites"></select>
</div>
<script>
angular.module('myApp', []).controller('myController', function ($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
$scope.selectedSite=$scope.sites[1];
});
</script>
</body>
</html>
ng-options通过对象数组创建选择框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
</div>
<script>
angular.module('myApp', []).controller('myController', function ($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
$scope.selectedSite=$scope.sites[1].url;
});
</script>
</body>
</html>
ng-repeat通过对象数组创建选择框
上面ng-options操作的是数组,下面操作对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<select ng-model="selectedSite" ng-options="x for (x,y) in sites"></select>
<p>你的选择是:{{selectedSite}}</p>
</div>
<script>
angular.module('myApp', []).controller('myController', function ($scope) {
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
$scope.selectedSite='Runoob';
});
</script>
</body>
</html>
ng-options操作简单对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<select ng-model="selectedCar" ng-options="x for (x,y) in cars"></select>
<p>你的选择是:{{selectedCar.brand}}</p>
</div>
<script>
angular.module('myApp', []).controller('myController', function ($scope) {
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
$scope.selectedCar=$scope.cars['car02'];
});
</script>
</body>
</html>
ng-options操作复杂对象1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<select ng-model="selectedCar" ng-options="y.brand for (x,y) in cars"></select>
<p>你的选择是:{{selectedCar}}</p>
</div>
<script>
angular.module('myApp', []).controller('myController', function ($scope) {
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
$scope.selectedCar=$scope.cars['car02'];
});
</script>
</body>
</html>
ng-options操作复杂对象2
angularjs笔记(二)的更多相关文章
- Mastering Web Application Development with AngularJS 读书笔记(二)
第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...
- 《CMake实践》笔记二:INSTALL/CMAKE_INSTALL_PREFIX
<CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...
- jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}
笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...
- Python 学习笔记二
笔记二 :print 以及基本文件操作 笔记一已取消置顶链接地址 http://www.cnblogs.com/dzzy/p/5140899.html 暑假只是快速过了一遍python ,现在起开始仔 ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- webpy使用笔记(二) session/sessionid的使用
webpy使用笔记(二) session的使用 webpy使用系列之session的使用,虽然工作中使用的是django,但是自己并不喜欢那种大而全的东西~什么都给你准备好了,自己好像一个机器人一样赶 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- 《MFC游戏开发》笔记二 建立工程、调整窗口
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9300383 作者:七十一雾央 新浪微博:http:/ ...
- JavaScript基础笔记二
一.函数返回值1.什么是函数返回值 函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...
随机推荐
- Android复习笔记--架构与版本
#Android架构: 1. Linux 内核层 Android 系统是基于Linux 2.6 内核的,这一层为Android 设备的各种硬件提供了底 层的驱动,如显示驱动.音频驱动.照相机驱动.蓝牙 ...
- 委托(delegate)
委托(dekegate)是一种动态调用方法的类型,与类.接口和数组相同,属于引用型,可以用来实现多路广播(MulticastDelegate). 多路广播(MulticastDelegate):可以用 ...
- Bete冲刺第五阶段
Bete冲刺第五阶段 今日工作: web: 今日做的最大的工作是成功顺利的吧web部署到阿里云服务器上了,代码顺利在公网上跑,解决了与ios的网络连接问题.同时优化了几个接口的查询逻辑,减少了对数据库 ...
- MVC 理解小谈
1. 如何理解MVC MVC 是一种经典的设计模式,全名为 Model-View-Controller,即 模型-视图-控制器. 其中,模型 是用于封装数据的载体,其本质是一个普通的 Java Bea ...
- MySQL的恢复脚本
原文转自: http://blog.csdn.net/dbanote/article/details/13295727 应用场景: ********************************** ...
- [转]Null value was assigned to a property of primitive type setter of"原因及解决方法
原文地址:http://blog.csdn.net/kevinzhangfei/article/details/6995316 在action请求数据的过程中报出"Null value wa ...
- [转]js中confirm实现执行操作前弹出确认框的方法
原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...
- Swift基础--Swift中的分类以及在分类中扩展init方法的注意事项
Swift中的分类 1.创建一个空的swift文件 2.关键字extension,格式: extension 要扩展的类名 {} extension UIButton { } Swift中扩展init ...
- u Calculate e阶乘相加求和问题
问题: (n < 10)写个算法 回答: 方法一: #include<stdio.h> int main() { int f[10]={1,1,2,6,24,120,7 ...
- 【poj1386】 Play on Words
http://poj.org/problem?id=1386 (题目链接) 题意 给出n个单词,判断它们能否首尾相接的排列在一起. Solution 将每一格单词的首字母向它的尾字母连一条有向边,那么 ...