显示前的 AngularJs 数据操作 - AngularJs Data Manipulation before display

我有一个简单的表格，其中有两列：a）名称b）国家。目前它工作正常，并显示用户和国家的名称。

现在我想添加一个条件，以便如果国家Germany那么它应该打印Europe而不是德国，如果国家是Argentina或Brazil它应该打印South America，对于其他国家/地区，它将保持不变，例如UK、Sweden或任何其他国家/地区将按原样打印。

我的角度代码是这样的：：

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

我的用户数据.php文件中的 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"}
    ]
}

在角度中有很多方法可以实现这一点。（指令，函数，服务，ng-if...等）

在您的情况下，最干净的是自定义过滤器：

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

在 html 中：

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

您应该在控制器中创建一个函数来检查它是哪个国家/地区，并应决定输出什么

检查小提琴

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $scope.names =[
    {"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"}
    ]
    $scope.getCountry = function(country) {
    if(country === 'Germany'){
    return 'EU'
    } else {
    return country
    }
    }
});

并在 HTML 中使用它，如下所示

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

名称

的 td 内部

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

你也可以使用ng-switch。

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

用于参考 https://plnkr.co/edit/OFWhePEJEuHSrBR3zW9i

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

你可以这样做：

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