AngularJS Filtering Object with Array of IDs -


i have array of objects populating multi-select. want display selected objects in directive , having difficulty i'm angular newb.

what want

{{selectedreport.rooms | filter: {id: vars[var.name]}  }} 

show selectedreport.rooms room.id in var[var.name]. var[var.name] ng-model binding. if select 4 reports may ["2","4","23","64"]

i need access selectedreport.rooms objects based upon ids. i'm not sure how in angular way.

any , 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 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] scope variable holds directive input selections.

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

what want: objects after filter:

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

final output

 102, 104c 

i able create custom filter achieve 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 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;      } }); 

Comments

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -