并显示相应的匹配数据

并显示相应的匹配数据

关注
发信
关注(28)粉丝(399)

2嵌套阵列之间物体Angularjs比较，并显示相应的匹配数据

本文介绍了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

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 =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序＆GT;\r
  ＆LT; D​​IV NG控制器=CTRL＆GT;\r
    ＆LT;选择NG选项=emp.events作为emp.empid在EMPDATA EMPNG模型=选择＆GT;＆LT; /选择＆GT;\r
    ＆LT;小时/＆GT;选择：{{选择}}\r
    ＆LT;小时/＆GT;\r
    ＆LT; D​​IV NG重复=D数据| findobj：选择＆GT; {{D}}＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r
\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.

Custom Filter Docs

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比较，并显示相应的匹配数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-15 00:08
Powered by LMLPHP ©2024 并显示相应的匹配数据 0.031477