Angular基础（2）
15.过滤器。过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
1 <div ng-app="" ng-init="lastName='CARSONWUU'"> 2 <p>{{lastName|lowercase}}</p> 3 </div>
1 <div ng-app="myApp" ng-controller="costCtrl"> 2 3 数量: <input type="number" ng-model="quantity"> 4 价格: <input type="number" ng-model="price"> 5 6 <p>总价 = {{ (quantity * price) | currency }}</p> 7 8 </div> 9 10 <script> 11 var app = angular.module('myApp', []); 12 app.controller('costCtrl', function($scope) { 13 $scope.quantity = 1; 14 $scope.price = 9.99; 15 }); 16 </script>
1 <div ng-app="myApp" ng-controller="myCtrl"> 2 3 4 姓名: {{ msg | reverse }} 5 6 </div> 7 8 <script> 9 var app = angular.module('myApp', []); 10 app.controller('myCtrl', function($scope) { 11 $scope.msg = "Runoob"; 12 }); 13 app.filter('reverse', function() { //可以注入依赖 14 return function(text) { 15 return text.split("").reverse().join(""); 16 } 17 }); 18 </script>
16.补充过滤器。
1 <div ng-app=""> 2 <p>1、uppercase，lowercase 大小写转换</p> 3 {{ "lower cap string" | uppercase }}<br> 4 {{ "TANK is GOOD" | lowercase }} 5 6 <p>2、date 格式化</p> 7 {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} 8 9 <p>3、number 格式化（保留小数）</p> 10 {{149016.1945000 | number:2}} 11 12 <p>4、currency货币格式化</p> 13 {{ 250 | currency }} <br> 14 {{ 250 | currency:"RMB ￥ " }} 15 16 <p>5、filter查找</p> 17 <p>查找name为iphone的行</p> 18 {{ [{"age": 20,"id": 10,"name": "iphone"}, 19 {"age": 12,"id": 11,"name": "sunm xing"}, 20 {"age": 44,"id": 12,"name": "test abc"} 21 ] | filter:{'name':'iphone'} }} 22 23 <p>6、limitTo 截取</p> 24 {{"1234567890" | limitTo :6}}<br> 25 {{"1234567890" | limitTo:-4}} 26 27 <p>7、orderBy 排序</p> 28 <p>根id降序排</p> 29 {{ [{"age": 20,"id": 10,"name": "iphone"}, 30 {"age": 12,"id": 11,"name": "sunm xing"}, 31 {"age": 44,"id": 12,"name": "test abc"} 32 ] | orderBy:'id':true }} 33 34 <p>根据id升序排</p> 35 {{ [{"age": 20,"id": 10,"name": "iphone"}, 36 {"age": 12,"id": 11,"name": "sunm xing"}, 37 {"age": 44,"id": 12,"name": "test abc"} 38 ] | orderBy:'id' }} 39 </div>
17.（17~21服务）$location 服务，它可以返回当前页面的 URL 地址。
1 var app = angular.module('myApp', []); 2 app.controller('customersCtrl', function($scope, $location) { 3 $scope.myUrl = $location.absUrl(); 4 });
18.$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。
1 var app = angular.module('myApp', []); 2 app.controller('myCtrl', function($scope, $http) { 3 $http.get("welcome.htm").then(function (response) { 4 $scope.myWelcome = response.data; 5 }); 6 });
19.$timeout 服务对应了 JS window.setTimeout 函数。
1 var app = angular.module('myApp', []); 2 app.controller('myCtrl', function($scope, $timeout) { 3 $scope.myHeader = "Hello World!"; 4 $timeout(function () { 5 $scope.myHeader = "How are you today?"; 6 }, 2000); 7 });
20.$interval 服务对应了 JS window.setInterval 函数。
1 var app = angular.module('myApp', []); 2 app.controller('myCtrl', function($scope, $interval) { 3 $scope.theTime = new Date().toLocaleTimeString(); 4 $interval(function () { 5 $scope.theTime = new Date().toLocaleTimeString(); 6 }, 1000); 7 });
21.创建自定义服务，过滤器中，使用自定义服务。
1 app.service('hexafy', function() { 2 this.myFunc = function (x) { 3 return x.toString(16); 4 } 5 }); 6 app.controller('myCtrl', function($scope, hexafy) { 7 $scope.hex = hexafy.myFunc(255); 8 }); 9 app.filter('myFormat',['hexafy', function(hexafy) { 10 return function(x) { 11 return hexafy.myFunc(x); 12 }; 13 }]);
22.$http.get()读取服务器数据。（1.5及以上版本）
1 <div ng-app="myApp" ng-controller="siteCtrl"> 2 3 <ul> 4 <li ng-repeat="x in names"> 5 {{ x.Name + ', ' + x.Country }} 6 </li> 7 </ul> 8 9 </div> 10 11 <script> 12 var app = angular.module('myApp', []); 13 app.controller('siteCtrl', function($scope, $http) { 14 $http.get("http://www.runoob.com/try/angularjs/data/sites.php") 15 .then(function (response) {$scope.names = response.data.sites;}); 16 }); 17 </script>
23.$http.get()读取服务器数据。（1.5以下版本）
1 <div ng-app="myApp" ng-controller="siteCtrl"> 2 3 <ul> 4 <li ng-repeat="x in names"> 5 {{ x.Name + ', ' + x.Country }} 6 </li> 7 </ul> 8 9 </div> 10 11 <script> 12 var app = angular.module('myApp', []); 13 app.controller('siteCtrl', function($scope, $http) { 14 $http.get("http://www.runoob.com/try/angularjs/data/sites.php") 15 .success(function (response) {$scope.names = response.sites;}); 16 }); 17 </script>
24.（24~28）使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出。
1 <div ng-app="myApp" ng-controller="myCtrl"> 2 3 <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> 4 </select> 5 6 </div> 7 8 <script> 9 var app = angular.module('myApp', []); 10 app.controller('myCtrl', function($scope) { 11 $scope.names = ["Google", "Runoob", "Taobao"]; 12 }); 13 </script>
25.
1 <select> 2 <option ng-repeat="x in names">{{x}}</option> 3 </select>
26.
1 <div ng-app="myApp" ng-controller="myCtrl"> 2 3 <p>选择网站:</p> 4 5 <select ng-model="selectedSite"> 6 <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option> 7 </select> 8 9 <h1>你选择的是: {{selectedSite}}</h1> 10 11 </div> 12 13 <script> 14 var app = angular.module('myApp', []); 15 app.controller('myCtrl', function($scope) { 16 $scope.sites = [ 17 {site : "Google", url : "http://www.google.com"}, 18 {site : "Runoob", url : "http://www.runoob.com"}, 19 {site : "Taobao", url : "http://www.taobao.com"} 20 ]; 21 }); 22 </script>
27.
<div ng-app="myApp" ng-controller="myCtrl"> <p>选择网站:</p> <select ng-model="selectedSite" ng-options="x.site for x in sites"> </select> <h1>你选择的是: {{selectedSite.site}}</h1> <p>网址为: {{selectedSite.url}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', 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"} ]; }); </script>
28.
<select ng-model="selectedSite" ng-options="x for (x, y) in sites"> </select> <h1>你选择的值是: {{selectedSite}}</h1> <div ng-app="myApp" ng-controller="myCtrl"> <p>选择一辆车:</p> <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select> <p>你选择的是: {{selectedCar.brand}}</p> <p>型号为: {{selectedCar.model}}</p> <p>颜色为: {{selectedCar.color}}</p> <p>下拉列表中的选项也可以是对象的属性。</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', 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; //设置第2个为初始值； }); </script>
29.ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
1 <div ng-app="" ng-init="mySwitch=false"> 2 <p> 3 <button ng-disabled="!mySwitch">点我!</button> 4 </p> 5 <p> 6 <input type="checkbox" ng-model="mySwitch"/>按钮 7 </p> 8 <p> 9 {{ mySwitch }} 10 </p> 11 </div>
30.ng-show,ng-hide。
1 <div ng-app="" ng-init="hour=13"> 2 3 <p ng-show="true">我是可见的。</p> 4 <p ng-show="false">我是不可见的。</p> 5 <p ng-show="hour > 12">我是可见的。</p> 6 7 <p ng-hide="true">我是不可见的。</p> 8 <p ng-hide="false">我是可见的。</p> 9 10 </div>
31.ng-show,ng-hide,ng-click。
1 <div ng-app="myApp" ng-controller="personCtrl"> 2 3 <button ng-click="toggle()">隐藏/显示</button> 4 5 <p ng-hide="myVar"> 6 名: <input type=text ng-model="firstName"><br> 7 姓: <input type=text ng-model="lastName"><br><br> 8 姓名: {{firstName + " " + lastName}} 9 </p> 10 11 </div> 12 13 <script> 14 var app = angular.module('myApp', []); 15 app.controller('personCtrl', function($scope) { 16 $scope.firstName = "John"; 17 $scope.lastName = "Doe"; 18 $scope.myVar = false; 19 $scope.toggle = function() { 20 $scope.myVar = !$scope.myVar; 21 } 22 }); 23 </script>
32.切换绑定事件。
1 <div ng-app="myApp" ng-controller='event'> 2 <div ng-show='flag' style='background: #ccc; 20px;height: 20px;border-radius: 50%;'>球</div> 3 <button ng-click='toggle()'>{{text}}</button> 4 </div> 5 var app = angular.module('myApp', []); 6 app.controller('event', ['$scope', function ($scope) { 7 $scope.flag = false; 8 $scope.text = '点击可见'; 9 10 $scope.toggle = function(){ 11 $scope.flag = !$scope.flag; 12 $scope.text = $scope.flag ? '点击消失' : '点击可见'; 13 } 14 }])
33.选中复选框。
1 <div ng-app=""> 2 <form> 3 选中复选框，显示标题: 4 <input type="checkbox" ng-model="myVar"> 5 </form> 6 <h1 ng-show="myVar">My Header</h1> 7 </div>
33.选中单选框。
1 <form> 2 选择一个选项: 3 <input type="radio" ng-model="myVar" value="dogs">Dogs 4 <input type="radio" ng-model="myVar" value="tuts">Tutorials 5 <input type="radio" ng-model="myVar" value="cars">Cars 6 </form> 7 8 <div ng-switch="myVar"> 9 <div ng-switch-when="dogs"> 10 <h1>Dogs</h1> 11 <p>Welcome to a world of dogs.</p> 12 </div> 13 <div ng-switch-when="tuts"> 14 <h1>Tutorials</h1> 15 <p>Learn from examples.</p> 16 </div> 17 <div ng-switch-when="cars"> 18 <h1>Cars</h1> 19 <p>Read about cars.</p> 20 </div> 21 </div>
34.表单实例。
1 <div ng-app="myApp" ng-controller="formCtrl"> 2 <form novalidate> 3 First Name:<br> 4 <input type="text" ng-model="user.firstName"><br> 5 Last Name:<br> 6 <input type="text" ng-model="user.lastName"> 7 <br><br> 8 <button ng-click="reset()">RESET</button> 9 </form> 10 <p>form = {{user}}</p> 11 <p>master = {{master}}</p> 12 </div> 13 14 <script> 15 var app = angular.module('myApp', []); 16 app.controller('formCtrl', function($scope) { 17 $scope.master = {firstName: "John", lastName: "Doe"}; 18 $scope.reset = function() { 19 $scope.user = angular.copy($scope.master); 20 }; 21 $scope.reset(); 22 }); 23 </script>
35.输入验证。
1 <h2>验证实例</h2> 2 3 <form ng-app="myApp" ng-controller="validateCtrl" 4 name="myForm" novalidate> 5 6 <p>用户名:<br> 7 <input type="text" name="user" ng-model="user" required> 8 <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> 9 <span ng-show="myForm.user.$error.required">用户名是必须的。</span> 10 </span> 11 </p> 12 13 <p>邮箱:<br> 14 <input type="email" name="email" ng-model="email" required> 15 <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> 16 <span ng-show="myForm.email.$error.required">邮箱是必须的。</span> 17 <span ng-show="myForm.email.$error.email">非法的邮箱地址。</span> 18 </span> 19 </p> 20 21 <p> 22 <input type="submit" 23 ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 24 myForm.email.$dirty && myForm.email.$invalid"> 25 </p> 26 27 </form> 28 29 <script> 30 var app = angular.module('myApp', []); 31 app.controller('validateCtrl', function($scope) { 32 $scope.user = 'John Doe'; 33 $scope.email = 'john.doe@gmail.com'; 34 }); 35 </script>
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});