AngularJs 学习笔记 2

浏览数：35 / 时间：2015年06月09日

AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器可用于转换数据：

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

向表达式添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

（下面的两个实例，我们将使用前面章节中提到的 person 控制器）

uppercase 过滤器格式化字符串为大写：

<div ng-app="" ng-controller="personController">

<p>姓名为 {{ person.lastName | uppercase }}</p>

</div>

　　数组、、

<div ng-app="" ng-init="names=[
{name:‘Jani‘,country:‘Norway‘},
{name:‘Hege‘,country:‘Sweden‘},
{name:‘Kai‘,country:‘Denmark‘}]">

<p>循环对象：</p>
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ‘, ‘ + x.country }}
  </li>
</ul>

</div>

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

orderBy 过滤器根据某个表达式排列数组：

<div ng-app="" ng-controller="namesController">

<p>循环对象：</p>
<ul>
  <li ng-repeat="x in names | orderBy:‘country‘">
    {{ x.name + ‘, ‘ + x.country }}
  </li>
</ul>

<div>

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：

<div ng-app="" ng-controller="namesController">

<p>输入过滤：</p>
<p><input type="text" ng-model="name"></p>

<ul>
  <li ng-repeat="x in names | filter:name | orderBy:‘country‘">
    {{ (x.name | uppercase) + ‘, ‘ + x.country }}
  </li>
</ul>

</div>

AngularJS XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

读取 JSON 文件

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
}]

<div ng-app="" ng-controller="customersController"> 
<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ‘, ‘ + x.Country }}
  </li>
</ul>
</div>
<script>
function customersController($scope,$http) {
    $http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php")
    .success(function(response) {$scope.names = response;});
}
</script>

　　发送和接受数据

 get_CityData:function(){
                    //return $http.get("js/testData/property.json");
                    return $http.post("/api/system/setting/projectParams/listForOne", {param: {code: ‘P04_00000‘}});
                },

/////service

 
            var getCityData = function () {
                manageService.get_CityData().success(function (result) {
                    var items = (result != undefined && result.data != undefined) ? result.data.items : [];
                    var data = {};
                    var provinces = [];
                    for (var i = 0; i < items.length; i++) {
                        var p = items[i];
                        if (p == undefined) {
                            continue;
                        }
                        if (p.items != undefined) {
                            var cities = [];
                            for (var j = 0; j < p.items.length; j++) {
                                var c = p.items[j];
                                if (c == undefined) {
                                    continue;
                                }
                                if (c.items != undefined) {
                                    var regions = [];
                                    for (var k = 0; k < c.items.length; k++) {
                                        var r = c.items[k];
                                        if (r == undefined) {
                                            continue;
                                        }
                                        regions.push({
                                            id: r.code,
                                            label: r.name
                                        });
                                    }
                                }
                                cities.push({
                                    id: c.code,
                                    label: c.name,
                                    regions: regions
                                });
                            }
                        }
                        provinces.push({
                            id: p.code,
                            label: p.name,
                            cities: cities
                        });
                    }

                    data = {provinces: provinces};
                    $scope.cityData = data;
                    vm.provinces = $scope.cityData.provinces || [];
                    $scope.provinceChange = function () {
                        vm.city = null;
                    };
                    $scope.cityChange = function () {
                        vm.region = null;
                    };
                })
            };