2嵌套阵列之间物体Angularjs比较，并显示相应的匹配数据 [英] Comparing objects between 2 nested arrays in Angularjs and display respective matching data
本文介绍了2嵌套阵列之间物体Angularjs比较，并显示相应的匹配数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个数组：第一个是 EMPDATA 控股 EMPID ，并通过员工参加活动，然后第二个数组是抱着事件的详细信息。
我需要从阵列比较 EMPID 用户输入，并使用显示特定事件的详细信息由各自的员工参加了可折叠的的jQuery 的。查找总价也。
$ scope.empdata = [];
$ scope.data = [];//第一个数组数据 $ scope.empdata.push（{
EMPID：empid_1'，
事件：[{
事件：第一事件
}，
{
事件：二事件
}
]}） $ scope.empdata.push（{
EMPID：empid_2'，
事件：[{
事件：第一事件
}，
{
事件：二事件
}，
{
事件：'三事件
}]
}） //第二阵列数据
$ scope.data.push（{
事件：第一事件，
日期：'10 -Jun-2015，
类型：[{
名称：酒店预订，
价格：400.00
}，{
名称：'飞行'，
价格：400.00
}，{
名称：酬金，
价格：900.00
}]
}）
$ scope.data.push（{
事件：二事件，
日期：'27 - 7月 - 2015年，
类型：[{
名称：酒店预订，
价格：530.00
}，{
名称：'火车'，
价格：400.00
}，{
名称：酬金，
价格：600.00
}]
}） $ scope.data.push（{
事件：'三事件，
日期：'20 -aug-2015， 类型：[{
名称：酒店预订，
价格：910.00
}，{
名称：'飞行'，
价格：500.00
}，{
名称：酬金，
价格：1500.00
}]
}）
在此先感谢！
解决方案
您可以使用自定义过滤器这一点。
看到下面的〔实施例
\r
\r\r
\r VAR应用= angular.module（'应用'，[]）;\r
\r
app.filter（'findobj'，函数（）{\r
返回功能（dataobj，选择）{\r
返回dataobj.filter（功能（数据）{\r
返回（选择|| []）。一些（功能（S）{\r
返回data.event === s.event;\r
}）;\r
}）;\r
};\r
}）;\r
app.controller（'CTRL'，函数（$范围）{\r
\r
$ scope.empdata = [];\r
$ scope.data = [];\r
$ scope.empdata.push（{\r
EMPID：empid_1'，\r
事件：[{\r
事件：第一事件\r
}，{\r
事件：二事件\r
}]\r
}）\r
\r
\r
\r
$ scope.empdata.push（{\r
EMPID：empid_2'，\r
事件：[{\r
事件：第一事件\r
}，{\r
事件：二事件\r
}，{\r
事件：'三事件\r
}]\r
}）\r
\r
$ scope.empdata.push（{\r
EMPID：empid_3'，\r
事件：[{\r
事件：'第四事件\r
}，{\r
事件：第五事件\r
}]\r
}）\r
\r
//第二阵列数据\r
$ scope.data.push（{\r
事件：第一事件，\r
日期：'10 -Jun-2015，\r
类型：[{\r
名称：酒店预订，\r
价格：400.00\r
}，{\r
名称：'飞行'，\r
价格：400.00\r
}，{\r
名称：酬金，\r
价格：900.00\r
}]\r
}）\r
\r
\r
$ scope.data.push（{\r
事件：二事件，\r
日期：'27 - 7月 - 2015年，\r
类型：[{\r
名称：酒店预订，\r
价格：530.00\r
}，{\r
名称：'火车'，\r
价格：400.00\r
}，{\r
名称：酬金，\r
价格：600.00\r
}]\r
}）\r
\r
$ scope.data.push（{\r
事件：'第四事件'，\r
日期：'27 - 7月 - 2015年，\r
类型：[{\r
名称：酒店预订，\r
价格：530.00\r
}，{\r
名称：'火车'，\r
价格：400.00\r
}，{\r
名称：酬金，\r
价格：600.00\r
}]\r
}）\r
}）; \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; DIV NG-应用=应用程序＆GT;\r
＆LT; DIV NG控制器=CTRL＆GT;\r
＆LT;选择NG选项=emp.events作为emp.empid在EMPDATA EMPNG模型=选择＆GT;＆LT; /选择＆GT;\r
＆LT;小时/＆GT;选择：{{选择}}\r
＆LT;小时/＆GT;\r
＆LT; DIV NG重复=D数据| findobj：选择＆GT; {{D}}＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT; \r
I'm having two arrays : first one is empdata holding empid and events attended by that employee, then second array is holding event details.
I need to compare empid from array with user input and display particular event details attended by respective employee using collapsible jQuery. Find total price also.
$scope.empdata=[];
$scope.data = [];
//first array data
$scope.empdata.push({
empid:'empid_1',
events:[{
event:'First Event'
},
{
event:'Second Event'
}
]})
$scope.empdata.push({
empid:'empid_2',
events:[{
event:'First Event'
},
{
event:'Second Event'
},
{
event:'Third Event'
}]
})
//second array data
$scope.data.push({
event:'First Event',
date: '10-jun-2015',
type:[{
name: 'Hotel Booking',
price: 400.00
},{
name: 'Flight',
price: 400.00
},{
name: 'Honorarium',
price: 900.00
}]
})
$scope.data.push({
event:'Second Event',
date: '27-july-2015',
type:[{
name: 'Hotel Booking',
price: 530.00
},{
name: 'Train',
price: 400.00
},{
name: 'Honorarium',
price: 600.00
}]
})
$scope.data.push({
event:'Third Event',
date: '20-aug-2015',
type:[{
name: 'Hotel Booking',
price: 910.00
},{
name: 'Flight',
price: 500.00
},{
name: 'Honorarium',
price: 1500.00
}]
})
Thanks in advance!
解决方案
You can use custom filter for this.
see the below exmaple
var app = angular.module('app', []);
app.filter('findobj', function() {
return function(dataobj, selected) {
return dataobj.filter(function(data) {
return (selected || []).some(function(s) {
return data.event === s.event;
});
});
};
});
app.controller('ctrl', function($scope) {
$scope.empdata = [];
$scope.data = [];
$scope.empdata.push({
empid: 'empid_1',
events: [{
event: 'First Event'
}, {
event: 'Second Event'
}]
})
$scope.empdata.push({
empid: 'empid_2',
events: [{
event: 'First Event'
}, {
event: 'Second Event'
}, {
event: 'Third Event'
}]
})
$scope.empdata.push({
empid: 'empid_3',
events: [{
event: 'Forth Event'
}, {
event: 'Fifth Event'
}]
})
//second array data
$scope.data.push({
event: 'First Event',
date: '10-jun-2015',
type: [{
name: 'Hotel Booking',
price: 400.00
}, {
name: 'Flight',
price: 400.00
}, {
name: 'Honorarium',
price: 900.00
}]
})
$scope.data.push({
event: 'Second Event',
date: '27-july-2015',
type: [{
name: 'Hotel Booking',
price: 530.00
}, {
name: 'Train',
price: 400.00
}, {
name: 'Honorarium',
price: 600.00
}]
})
$scope.data.push({
event: 'Forth Event',
date: '27-july-2015',
type: [{
name: 'Hotel Booking',
price: 530.00
}, {
name: 'Train',
price: 400.00
}, {
name: 'Honorarium',
price: 600.00
}]
})
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<select ng-options="emp.events as emp.empid for emp in empdata" ng-model="selected"></select>
<hr/>Selected: {{selected}}
<hr/>
<div ng-repeat="d in data | findobj:selected ">{{d}}</div>
</div>
</div>
这篇关于2嵌套阵列之间物体Angularjs比较，并显示相应的匹配数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
