将多个不同的数组关联到Angularjs中的单个对象

Question

我是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>

Answer 1

对不起，我还不能发表评论。只是从阅读你的问题，我猜你正在寻找过滤列表使用三个过滤标准与OR而不是它正在做的AND？如果是这样，您可以执行以下操作：

<div ng-repeat="data in accelerators | orderBy:'date' | filter: doFilter">

然后

$scope.doFilter = function(val,idx,arr) { or logic here }

如果没有，您需要更多地解释问题/所需功能。