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;width: 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);
});