Я новичок в javascript, так что, возможно, то, что я спрашиваю, даже не возможно из-за языка.
Мне нужно связать один объект с несколькими массивами, аналогично тегу поста.В этом случае объект представляет собой один класс, который имеет отношение к нескольким программным платформам (мои несколько массивов).Мы фильтруем по платформе, дате и роли системы, поэтому, если я разделю объект на несколько объектов, каждый со своей платформой, а не сгруппирую их вместе, а пользователь отфильтрует только по дням, класс отобразится впланировать несколько раз.
Есть ли способ записать массивы как "или / или" вместо "+"?
Спасибо!
(function(){
var app = angular.module("app", []);
app.controller("mainController", function($scope, accelerateData) {
$scope.accelerates = accelerateData.getAll();
$scope.roles = _.chain($scope.accelerates).pluck("role").uniq().sortBy().value();
$scope.tracks = _.chain($scope.accelerates).pluck("track").uniq().sortBy().value();
$scope.years = _.chain($scope.accelerates).pluck("date").uniq().sortBy().value();
$scope.clearFilters = function(){
$scope.selectedTrack = undefined;
$scope.selectedYear = undefined;
$scope.selectedRole = undefined;
};
});
/** All the Data **/
app.factory("accelerateData", function(){
var accelerates = [
{
track:"AMS360, VAP, ImageRight", name:"What's New with AMS360 and Vertafore Agency Platform", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"Exhibit Hall B", description:"In this session, Vertafore leaders will review the latest releases of AMS360, and give you a peek into what's next for this amazing product.", instructors:"Sharmila Ray-Vertafore, Dave Acker-Vertafore" },
{ track:"BenefitPoint, AMS360, VAP, Sagitta", name:"Why BenefitPoint Works for Us ", role:"All", skill:"Beginners", date:"5/22/19 - Wednesday", time:"8:30 AM - 9:30 AM", location:"W-262", description:"Are you interested in learning what BenefitPoint can do for your agency? Have you recently purchased BenefitPoint and want to get insight into what it can do? Join us as we explore how using this system can impact everyday tasks and help your team work more efficiently and effectively.", instructors:"Angela Minutaglio-Senior Project Manager-Marsh & McLennan Agency, Kristie Barnes - Wortham Insurance, Carla Young-Vertafore" },
{ track:"BenefitPoint", name:"RFP Module: Questionnaire & Request", role:"All", skill:"All", date:"5/22/19 - Wednesday", time:"8:30 AM - 9:30 AM", location:"W-263", description:"Is your agency struggling with managing large group renewal requests and the process of collecting carrier quotes? If so the BenefitPoint Request process may offer some valuable best practice solutions for electronically managing all of your RFP information. Did you know that there is also a Questionnaire component within Requests? This session will demonstrate how to use the BP Request process and the Questionnaire module to provide standardization across offices, elimination of duplicative data entry, better response management and improved analysis (with integrated carrier scoring and ranking).", instructors:"Cindy Renteria-Project Manager-Keenan, Michelle Lewis- Director Product Management-Vertafore" },
{ track:"AMS360", name:"How Do You Look? Find Out How to Use View Options to Maximize Usability", role:"Account Manager", skill:"Basic", date:"5/22/19 - Wednesday", time:"9:45 AM - 10:45 AM", location:"Jr Ballroom B", description:"Learn how to benefit from customized Views to maximize your View and View options to improve your efficiency.", instructors:"Venus Tondreau, Sheri Prout-Vertafore" },
{ track:"AMS360/VAP", name:"Are You Using This Awesome FREE Tool: DOC360?", role:"Account Manager", skill:"Basic", date:"5/22/19 - Wednesday", time:"9:45 AM - 10:45 AM", location:"Jr Ballroom C", description:"DOC360 is the best kept secret for having data in one place and using it over and over. Learn what you don't know about this great tool.", instructors:"Whitney Malone, Laurie Gilliam, Geoff Lynch-Vertafore" },
{ track:"AMS360, VAP", name:"Accounting Administration Setups", role:"Accounting", skill:"Intermediate/Advanced", date:"5/22/19 - Wednesday", time:"9:45 AM - 10:45 AM", location:"Jr Ballroom D", description:"Agency Accounting Options, Chart of Accounts, Banks, Billing Charges & Credits… all this and more in this class! Recommended for those studying for Accounting Certification.", instructors:"Lorraine Plezia, Ron Harrell-Vertafore" },
{ track:"ImageRight", name:"Day 3 Q & A", role:"All", skill:"All", date:"5/23/19 - Thursday", time:"11:00 AM - 12:00 PM", location:"W-263", description:"After a day of learning let's end the day with a panel discussion. Join the conversation to share what you learned, ask questions that you haven't gotten answered, and share your ideas with the development team about how you want to see BenefitPoint grow and change in the future.", instructors:"Chris Walters, Mindy Day, Michelle Lewis, Gary Bossert, Angela Minutaglio, Tony Franza" }
];
return {
getAll: function(){
return accelerates;
}
};
});
}());
html,body {
margin: 0;
padding: 20px;
font-family:Verdana, sans-serif;
}
ul,li {
padding: 0;
margin: 0;
list-style: none;
font-family:Verdana, sans-serif;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.filter-form {
height: 300px;
width:100%;
}
.filter-item {
background: #fff;
min-height: 30px;
padding: 5px 10px;
color: #333;
border-bottom: solid 1px #ed601a;
width: 100%;
}
.filter-options {
display: flex;
margin-bottom: 20px;
}
.filter-option {
margin: 0 10px;
}
label, select, .filter-clear-button {
margin-left: 10px;
padding:10px;
float:left;
}
select .filter{
max-width:20%;
}
.filter-item h4{
font-weight:bold;
}
/* Education Sessions */
.ed-session {
width: 100%;
min-height: 150px;
margin: 5px;
padding:10px;
float: left;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
border-bottom: 2px #ed601a solid;
}
.ed-session:hover{
-ms-transform: scale(1.02); /* IE 9 */
-webkit-transform: scale(1.02); /* Safari 3-8 */
transform: scale(1.02);
/* background-color:#333;
color:#fff;
font-size:15px;*/
}
.session-title{
font-weight: 800;
font-size:18px;
margin-bottom:5px;
}
.track-system{
color:#ed601a;
}
.desc {
margin:10px 0px;
font-size: 15px;
transition: all 0.4s ease-in-out 0s;
}
.specifics{
font-size:14px;
border-left: 2px solid #ddd;
/*margin-left: 25px;*/
padding:5px;
}
.small-text{
/* font-weight:bold;*/
color:#808080;
border-right: 2px solid #ddd;
margin-right:5px;
/*background-color:#ccc;*/
}
@media (max-width: 500px) {
select{
width:100%;
float:right;
}
label{
width:100%;
margin:0px auto;
text-align:left;
}
}
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="lodash.js@*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<!-- Main Content --->
<body ng-app="app" class="container">
<div ng-controller="mainController">
<h1>Accelerate Education Sessions</h1>
<label>Track:</label>
<select class="filter" ng-model="selectedTrack" ng-options="track for track in tracks" class="form-control"> </select>
<label>Date:</label>
<select class="filter" ng-model="selectedYear" ng-options="year for year in years | orderBy:'date'" class="form-control"></select>
<label>Role:</label>
<select class="filter" ng-model="selectedRole" ng-options="role for role in roles" class="form-control"></select>
<button class="filter-clear-button" ng-click="clearFilters()">Clear</button>
<table class="table">
<tbody>
<div ng-repeat="accelerate in accelerates | orderBy : 'date' | filter:{ track: selectedTrack, date:selectedYear, role:selectedRole}">
<div class="filter-item ed-session"><h4 class="session-title">{{ accelerate.name }}</h4>
<div class="specifics"> <b class="track-system">{{accelerate.track }}</b><br/>
Role: <b>{{accelerate.role }}</b> | Skill Level: <b>{{accelerate.skill }}</b><br/>
Date: <b>{{accelerate.date }} </b>| {{accelerate.time }}</b> | Room:{{accelerate.location }} </div>
<p class="desc"><span class="small-text">Description </span> {{accelerate.description}} — Instructor(s): <em>{{accelerate.instructors}}</em></p></div>
</div>
</tbody>
</table>
</div>
<div class="filter-form">
<ul class="filter-items" ng-repeat="accelerate in accelerates | filter:{ track:selectedTrack, date:selectedDate, name:selectedName}">
<li class="filter-item ed-session"><h4 class="session-title">{{ accelerate.name }}</h4>
<div class="specifics"> <b class="track-system">{{accelerate.track }}</b><br/>
Role: <b>{{accelerate.role }}</b> | Skill Level: <b>{{accelerate.skill }}</b><br/>
{{accelerate.date }} | {{accelerate.time }}</b> {{accelerate.location }} </div>
<p class="desc"><span class="small-text">Description </span> {{accelerate.description}} — Instructor(s): <em>{{accelerate.instructors}}</em></p></li>
</ul>
</div>
</div>
</body>
</html>