显示前的 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>
相关文章:
- 加载collada纹理数据(.jpg本身)时对其进行操作
- 使用immutable.js在Redux中操作嵌套数组中的数据
- 操作数据的最佳实践
- 我应该如何将响应数据保存在对象(json)中以获得更好的操作和性能
- 如何在窗体操作或window.location(PHP)中使用数据切换
- 使用Angular JS for WordPress JSON API使用JSON操作数据
- 谷歌融合表查询数据操作
- JavaScript canvas 图像数据操作
- 使用 Ajax 和 JSON 的 Instgram API 的数据操作
- Javascript JSON数据操作库
- 如何向$resource对象添加数据操作
- 在JavaScript纯函数中使用外部数据/操作
- Backbone.js多表数据操作
- 使用jQuery对树形结构进行数据操作
- sql还是Jint?c#中的Javascript数据操作
- 在JavaScript中对CSV数据进行数据操作(fill, min, max)
- 向包含类的所有img添加数据操作
- 将JSON数据操作到另一个对象中
- 显示前的 AngularJs 数据操作
- 发送ajax请求和防止数据操作的最安全解决方案是什么?