【Angular】Angular基础（2）

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