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 显示内容都有两种实现方式,java代码中实现,xml布局中实现(或者权限管理页面) 直接上代码: java方法 setRequestedOrientation(ActivityIn ...
个人阅读作业——M1/M2总结
~ http://www.cnblogs.com/wx1306/p/4831950.html 在这篇博客中,我提出来一些关于软件工程的问题,但随着这一个学期的即将结束,以及我对软件开发的了解的深入,我 ...
HttpWebRequest提交(Post)数据
protected void Page_Load(object sender, EventArgs e) { string sql = "select top 1 * from [user] ...
js实现倒计时效果
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...
SSM框架搭建（转发）
SSM框架,顾名思义,就是Spring+SpringMVC+mybatis. 通过Spring来将各层进行整合, 通过spring来管理持久层(mybatis), 通过spring来管理handler ...
Asp.net Mvc 使用EF6 code first 方式连接MySQL总结
最近由于服务器变更为Linux系统.MsSql for Linux什么时候出来到生产环境使用还是要很长时间的.于是考虑使用Mysql数据库,ORM使用EF.于是先踩下坑顺便记录一下,有需要的tx可以参 ...
Python爬虫基础知识入门一
一.什么是爬虫,爬虫能做什么爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓取下来.比如它在抓取一个网 ...
学习WebSocket(一):Spring WebSocket的简单使用
1.什么是websocket? WebSocket协议定义了一种web应用的新功能,它实现了服务器端和客户端的全双工通信.全双工通信即通信的双方可以同时发送和接收信息的信息交互方式.它是继Java ...
【bzoj3156】防御准备
http://www.lydsy.com/JudgeOnline/problem.php?id=3156 (题目链接) 题意给出n个防御节点,每个节点有两种选择,可以花费a[i]建立一个防御塔,或者 ...
CSS3盒模型display初探（display:box/display:flex）
可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...

angularjs笔记(二)

angularjs笔记(二)的更多相关文章

随机推荐

热门专题