使用AngularJS HTML从集合中过滤嵌入式Json元素
[英]Filter Embedded Json element from a Collection using AngularJS HTML
问题描述
I'm having a JSON Collection, I wish to dispay Email ID which is marked as IsPreffered = TRUE using AngularJS HTML without . 
我有一个JSON集合，我希望使用不带AngularJS HTML的电子邮件ID标记为IsPreffered = TRUE 。 user.Name 用户名
My JSON Collection : 我的JSON集合：
{ "user" : [
{
"Name" : "B. Balamanigandan",
"Email": [
{
"Id": "bala@gmail.com",
"IsPreffered": true
},
{
"Id": "mani@gmail.com",
"IsPreffered": false
}
]}
]};
HTML Source Code: HTML源代码：
<div>
<h3>Employee Details:</h3>
<span> {{collection.user.Name}} </span>
<span> {{collection.user.Email.Id}} </span>
</div>
The Collection user contains only one document . 收集user仅包含一个文档 。 So, I didn't use ng-repeat. 因此，我没有使用ng-repeat。 user is a Collection not a Document . user是一个Collection而不是一个Document 。 One more check I need. 我还需要一张支票。 If more than one email has `IsPreferred == true', then I have the take the last one. 如果一封以上的电子邮件具有“ IsPreferred == true”，则我接受最后一封。 Kindly assist me. 请帮助我。
Kindly filter the condition using HTML Level not in JavaScript Level. 请使用不在JavaScript Level中的HTML Level过滤条件。 Kindly assist me. 请帮助我。
2 个解决方案
解决方案1
1 已采纳 2016-06-19 06:47:12
instead of this: 代替这个：
<div>
<h3>Employee Details:</h3>
<span> {{collection.user.Name}} </span>
<span> {{collection.user.Email.Id}} </span>
</div>
you will have to do this: 您将必须执行以下操作：
<div>
<h3>Employee Details:</h3>
<span> {{collection.user[0].Name}} </span>
<span ng-repeat="email in collection.user[0].email| filter: {IsPreffered : 'true'}"> {{email.Id}} </span>
</div>
You have to use array syntax, because although there is only 1 user object, it is structured in the json as an array ( note the [ ] , same for Email). 您必须使用数组语法，因为尽管只有1个用户对象，但它在json中构造为数组（请注意[]，与Email相同）。
Here is a fiddle: http://jsfiddle.net/Lvc0u55v/5593/ 这是一个小提琴： http : //jsfiddle.net/Lvc0u55v/5593/
UPDATE: For showing only the last email which is true, use ng-if: 更新：仅显示最后一封为真的电子邮件，请使用ng-if：
<span ng-repeat="email in collection.user[0].Email| filter: {IsPreffered : true} " ng-if="$last"> {{email.Id}}</span>
Here is the updated fiddle: http://jsfiddle.net/Lvc0u55v/5594/ 这是更新的小提琴： http : //jsfiddle.net/Lvc0u55v/5594/
解决方案2
0 2016-06-19 06:55:07
One way to do this is to use ngRepeat on the user Emails array with a filter to get only those Emails where "IsPreffered": true . 一种方法是在带有过滤器的用户Emails数组上使用ngRepeat ，以仅获取"IsPreffered": true那些Email。 The filter compares each object in the Emails array with the filter object ( filterEmail ). 筛选器将Emails数组中的每个对象与筛选器对象（ filterEmail ）进行比较。 This filter object is defined in the controller - this way you will be able to change by demand or even set it dynamically. 该过滤器对象是在控制器中定义的-通过这种方式，您可以根据需要进行更改，甚至可以动态设置它。
var app = angular.module('app', []); app.controller('ctrl', function($scope) { $scope.collection = { "user": { "Name": "B. Balamanigandan", "Email": [{ "Id": "bala@gmail.com", "IsPreffered": true }, { "Id": "mani@gmail.com", "IsPreffered": false }] } }; $scope.filterEmail = { "IsPreffered": true }; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="app" ng-controller="ctrl"> <div> <h3>Employee Details:</h3> <span> {{collection.user.Name}} </span> <span ng-repeat="email in collection.user.Email | filter : filterEmail "> {{email.Id}} </span> </div> </body>
NOTE: To my understanding it doesn't make much sense to have user as an array inside an object (in my example I removed the inner array). 注意：据我了解，将user作为对象内部的数组没有多大意义（在我的示例中，我删除了内部数组）。 If you insist on keeping this data-schema, you will need to change every reference of collection.user to collection.user[0] . 如果您坚持保持这种数据模式，则需要将collection.user每个引用更改为collection.user[0] 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.