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

posted @ 2016-05-05 14:22 jiapeng 阅读(237) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

jiapeng

angularjs笔记(二)

公告