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
Post a Comment