AngularJSフィルタ

フィルタは、式と命令にパイプ文字(|)を使用して追加できます.
AngularJSフィルタは、データを変換するために使用できます.
フィルタ
説明
currency
数値を通貨形式で書式設定します.
filter
配列アイテムからサブセットを選択します.
lowercase
書式設定文字列は小文字です.
orderBy
式に基づいて配列を並べます.
uppercase
書式設定文字列は大文字です.
 
 
 
 
 

式にフィルタを追加

フィルタは、パイプ文字(|)とフィルタを使用して式に追加できます.
(次の2つの例では、前の章で説明した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>

　　

フィルタ入力

入力フィルタは、パイプ文字(|)とフィルタを使用してコマンドに追加できます.フィルタの後ろには、コロンとモデル名が付いています.
フィルタフィルタ配列からサブセットを選択します.

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

                    };

                })

            };