表示前のAngularJsデータ操作

私は2つの列がある単純なテーブルを持っています：a）名前b）国。現在は正常に動作し、ユーザーと国の名前が表示されます。表示前のAngularJsデータ操作

今私は国ではなく、ドイツのその後Germanyであれば、それはEuropeを印刷する必要があり、国がArgentinaかBrazilであれば、それはSouth Americaを印刷する必要があり、他の国のために、それはUK例えば、同じままになりますように条件を追加したいです、 Swedenまたは他の国がそのまま印刷されます。私のユーザーdata.phpファイルに

私の角度のコードはこれです::

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table> 
    <tr ng-repeat="x in names"> 
    <td>{{ x.Name }}</td> 
    <td>{{ x.Country }}</td> 
    </tr> 
</table> 

</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope, $http) { 
    $http.get("http://localhost/test/user_data.php") 
    .then(function (response) {$scope.names = response.data.records;}); 
}); 
</script> 

</body> 
</html>

とJSONデータはこれです::

{ 
    "records":[ 
    {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, 
    {"Name":"Ana Trujillo Emparedados","City":"México D.F.","Country":"Mexico"}, 
    {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"}, 
    {"Name":"Around the Horn","City":"London","Country":"UK"}, 
    {"Name":"B's Beverages","City":"London","Country":"UK"}, 
    {"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"}, 
    {"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"}, 
    {"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"}, 
    {"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"}, 
    {"Name":"Bon app'","City":"Marseille","Country":"France"}, 
    {"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"}, 
    {"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"}, 
    {"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"}, 
    {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}, 
    {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"} 
    ] 
}

出典

2016-07-12 D555

どのように私はこれはサービスで行うことができますか？ – D555

のTD内の角度でこれを達成するための多数の方法がありますようにHTMLでそれを使用しています。（ディレクティブ、機能、サービス、...など-場合はNG。）あなたのケースで最もクリーンでは、カスタムフィルタとなり

：

.filter('countryFormat', function() { 
    return function(input) { 
     if (input != undefined) { 
      //Your switch case here 
      return 'South America'; // for example 
     } 
    } 
});

とHTMLで：

<td>{{ x.Country | countryFormat }}</td>

出典

2016-07-12 06:50:25 gyc

あなたは確認するように、コントローラ内部の機能を作成する必要がありますどの国それは、出力

チェックFiddle

に何を決定する必要があります

と

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table> 
    <tr ng-repeat="x in names"> 
    <td>{{ x.Name }}</td> 
    <td>{{ getCountry(x.Country) }}</td> 
    </tr> 
</table> 

</div>

出典

2016-07-12 06:42:40 Arif

の下に名前

<td><div ng-if="x.name=="Germany">Europe</div><div ng-if="x.name=="argentina||brazil">south america</div>

出典

2016-07-12 06:46:56

あなたも

<td ng-switch on="x.Country"> 
     <div ng-switch-when="Germany ">Europe </div> 
     <div ng-switch-when="Argentina">South America</div> 
     <div ng-switch-when="Brazil ">South America</div> 
     <div ng-switch-when="Brazil ">South America</div> 
     <div ng-switch-default>{{x.Country}}</div> 
     </td>

refrenceのためにNG-スイッチを使用することができますhttps://plnkr.co/edit/OFWhePEJEuHSrBR3zW9i

出典

2016-07-12 06:51:12

あなたはこれを行うことができます。

  <table> 
      <tr ng-repeat="x in names"> 
       <td>{{ x.Name }}</td> 
       <td ng-hide="(x.Country == 'Argentina' || x.Country == 'Brazil' || x.Country == 'Germany')">{{ x.Country }}</td> 
       <td ng-show="x.Country=='Germany'">Europe</td> 
       <td ng-show="x.Country == 'Argentina' || x.Country == 'Brazil'">South America</td> 
      </tr> 
     </table>

出典

2016-07-12 06:52:36

<table> 
    <tr ng-repeat="x in names"> 
    <td>{{ x.Name }}</td> 
    <td ng-if = "x.Country === 'Germany'">Europe</td> 
    <td ng-if = "x.Country === 'Argentina'|| x.Country ==='Brazil'">South America</td> 
    <td ng-if = "x.Country !== 'Argentina' || x.Country !== 'Brazil' || x.Country !== 'Germany'">{{x.Country}}</td> 
    </tr> 
</table>

出典

2016-07-12 06:55:38

あなたが回答として投稿しているコードに説明を追加することは、訪問者がなぜこれが良い答えであるかを理解するのに役立ちます。 – abarisone

表示前のAngularJsデータ操作

答えて

関連する問題