Javascript 显示前的AngularJs数据操作_Javascript_Php_Angularjs

Javascript 显示前的AngularJs数据操作

javascript php angularjs

Javascript 显示前的AngularJs数据操作,javascript,php,angularjs,Javascript,Php,Angularjs,我有一个简单的表，其中有两列：a）名称b）国家。目前，它工作正常，并显示用户和国家的名称现在我想添加一个条件，如果国家是德国，那么它应该打印欧洲，如果国家是阿根廷或巴西，它应该打印南美，对于其他国家，它将保持不变，例如英国，瑞典或任何其他国家将按原样打印我的角度代码是：： <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular

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

现在我想添加一个条件，如果国家是

德国

，那么它应该打印

欧洲

，如果国家是

阿根廷

或

巴西

，它应该打印

南美

，对于其他国家，它将保持不变，例如

英国

，

瑞典

或任何其他国家将按原样打印

我的角度代码是：：

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

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

检查

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


{{x.Name}
{{getCountry（x.Country）}

在名称的td内

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

南美洲

有很多方法可以从角度实现这一点。（指令、功能、服务、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>

{{x.Country | countryFormat}

您也可以使用ng开关

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


欧洲
南美洲
南美洲
南美洲
{{x.Country}

对于参考文件，您可以执行以下操作：

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


{{x.Name}
{{x.国家}
欧洲
南美洲


{{x.Name}
欧洲
南美洲
{{x.Country}

如何在服务中做到这一点？最好在您发布的代码中添加解释作为答案，这样可以帮助访问者理解为什么这是一个好答案。

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

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

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