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

You need to show more code than this. Are you using ng-options in a <select> If so, you don't want curly braces in the statement. — andyhasit
– andyhasit, Commented Jan 27, 2016 at 18:59
Use something like ng-model="selectedRooms", and ng-options="room.name for room in allRooms". And there you go: selectedRooms is the array of selected rooms. — JB Nizet
– JB Nizet, Commented Jan 27, 2016 at 19:00
I already have an array of selectedRooms. The problem is I want to display the actual Room objects, based on a filter on ID of the object. I want to only show the objects that have an ID present in my selected array. — MichaelWClark
– MichaelWClark, Commented Jan 27, 2016 at 19:16
Your question is quite unclear. What is selectedRooms? Its name implies that it's an array, containing rooms, and that it only contains the selected rooms. So, you already have your array or Room objects that are selected, don't you. If not, what is selectedRooms? — JB Nizet
– JB Nizet, Commented Jan 27, 2016 at 19:26
Check the edit. I included more examples and code. It should clear things up. selectedRooms is nothing. selectedReport is a complex object. selectedReport.rooms is an array of Room objects. — MichaelWClark
– MichaelWClark, Commented Jan 27, 2016 at 19:49

MichaelWClark · Accepted Answer · 2016-01-27 21:23:32Z

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;

    }
});

Collectives™ on Stack Overflow

AngularJS Filtering Object with Array of IDs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related