AngularJS Filtering Object with Array of IDs

Question

I have an array of objects populating a multi-select. I want to display the selected objects in my directive and am having difficulty as I'm a angular newb.

What I want to do

{{selectedReport.rooms | filter: {id: Vars[var.name]}  }}

Show selectedReport.rooms where room.id IN Var[var.name]. Var[var.name] is my ng-model binding. If I select 4 reports it may look like ["2","4","23","64"]

I need to access the selectedReport.rooms objects based upon those IDs. I'm not sure how to do this in the angular way.

Any and all help is much appreciated.

My directive code:

'use strict';

angular.module('lodgicalWebApp')
  .directive('lodReportVariableRoomFilter', [ function ( Report, Rooms) {


    return {
      template: ' \
      <div class="form-group" ng-show="selectedReport.rooms.length > 0"> \
        <label for="{{var.name}}" class="col-sm-3 control-label">{{var.name}}</label> \
        <div class="col-sm-5"> \
          <select multiple="multiple" ng-model="Vars[var.name]"  class="form-control"> \
            <option ng-repeat="room in selectedReport.rooms track by room.id" value="{{room.id}}" >{{room.name}}</option> \
          </select> \
      </div> {{ selectedReport.rooms | filter: {id: Vars[var.name]} }}\
    </div> \
    <div class="form-group" ng-show="selectedReport.rooms.length == 0"> \
      <label class="col-sm-8 control-label">Loading Rooms...</label> \
    </div> \
  </div>',
      restrict: 'EA',
      link: function(scope, element, attr){
        scope.Vars[scope.var.name] = [""] ;
      }
    };

  }]);



//example of selectedReport.rooms
selectedReport.rooms = [{id:'', name:'(all)'}, {id:'1', name:'102'}, {id:'3', name: '104c'}]; 

Vars[var.name] is just a Scope variable that holds all my directive input selections.

//example of Vars[var.name]
Vars[var.name] = ['1','3'];

What I want: Objects after filter:

Room [ id: '1', name: '102']
Room [ id: '3', name: '104c']

Final output

 102, 104c

Answer 1

I was able to create a custom filter to achieve what i needed.

'use strict';

/**
 * @ngdoc directive
 * @name lodgicalWebApp.directive:lodReportVariableCgflookup
 * @description
 * # lodReportVariableCgflookup
 */
angular.module('lodgicalWebApp')
  .directive('lodReportVariableRoomFilter', [ function ( Report, Rooms) {


    return {
      template: ' \
      <div class="form-group" ng-show="selectedReport.rooms.length > 0"> \
        <label for="{{var.name}}" class="col-sm-3 control-label">{{var.name}}</label> \
        <div class="col-sm-5"> \
          <select multiple="multiple" ng-model="Vars[var.name]"  class="form-control"> \
            <option ng-repeat="room in selectedReport.rooms track by room.id" value="{{room.id}}" >{{room.name}}</option> \
          </select> \
        </div> \
      </div> \
      <div class="form-group" ng-show="selectedReport.rooms.length == 0"> \
        <label class="col-sm-8 control-label">Loading Rooms...</label> \
      </div> \
      <div class="form-group" ng-show="Vars[var.name].length >0"> \
        <label class="col-sm-3 control-label">Selected Rooms: </label> \
        <div class="col-sm-5"> \
          <ul> \
             <li ng-repeat = "selectedRoom in selectedReport.rooms | selectedRooms: Vars[var.name] "> \
                {{ selectedRoom.name  }} \
             </li> \
          </ul> \
        </div> \
      </div> \
  ',
      restrict: 'EA',
      link: function(scope, element, attr){
        scope.Vars[scope.var.name] = [""] ;

      }
    };

  }]);

Filter:

angular.module('lodgicalWebApp').filter('selectedRooms', function() {
    return function(rooms, ids) {
        var filtered=[];
        angular.forEach(rooms, function(v,k){
            if(ids.indexOf(v.id) > -1){
                filtered.push(v);
            }
        });

        return filtered;

    }
});