AngularJS Filter Select array

Hope this is your expected results. Below are two options I tried ... demo | http://embed.plnkr.co/689OQztgu8F800YjBB2L/

Ref : underscorejs | angular-filter | everything-about-custom-filters-in-angular-js

// 1. filter items collection by location
angular.module('demo').filter('withLocation', function () {
return function (items, selectedLocation) {
    function isLocationInLocations (elem) { return selectedLocation && elem.location_id === selectedLocation.id; }
        function itemHasLocation (elm){ return (elm.locations && elm.locations.filter(isLocationInLocations).length > 0); }
        return items.filter(itemHasLocation);
}});

// 2. filter function to check if option can be rendered ....
vm._filters.selectableItems = function(selectedLocation) {
    return function(item) {
        var locationsHasLocation = function(elem) { return selectedLocation && elem.location_id === selectedLocation.id; }
        return (item.locations && item.locations.filter(locationsHasLocation).length > 0);
    }
}

One way to do this is to supply a filter function to filter the locations. Something like:

vm.filterFun = function(selectedLocations) {
  return function (location) {
    var n;
    if (!selectedLocations) {
      return true;
    }
    for(n=0;n<selectedLocations.length;n += 1) {
      if (selectedLocations[n].location_id === location.id) {
        return true;
      }
    }
    return false;
  }
}

This is actually a function returning a filter function, based on the item selected.

Then in your select you apply the filter with:

<select
      class="form-control"
      ng-model="vm.transaction.location_from"
      ng-options="l as l.name for l in vm.locations | filter:vm.filterFun(vm.transaction.item.locations)">
</select>

See plunker here.

I would forego angular filters and use the getterSetter option of ngModelOptions.

It could look something like this:

var selectedItem, selectedLocation; 

var items = [];
var locations = [];

vm._items = items; // Static, always allow all items to be selected.
vm.locations = function () {
  // Return differing results based on selectedItem.locations. 
};

vm._transaction = {
  location: function (v) {
    /**
     * If v is null, it is not present in the selectedItem.locations array. 
     * The extra check will ensure that we don't persist a filtered out location when 
     * selecting another item. 
     */
    return (v || v === null) ? (selectedLocation = v) : selectedLocation;
  },
  item: function (v) {
    return v ? (selectedItem = v) : selectedItem;
  }
};

Here's a plunker demonstrating the behaviour.

Not as simple/straight-forward as a filter, but I would bet (at least in the case of a piped filter) that you'd possibly see a slight performance gain going with this approach.

I do not have numbers to back up the above statement, and it usually boils down to the size of your dataset anyway. Grain of salt.

If you need it to function the other way around, you could write up a secondary filter like such:

function superFilter2 (arr) {
  // If no location is selected, we can safely return the entire set.
  if (!selectedLocation) {
    return arr;
  }

  // Grab the current location ID. 
  var id = selectedLocation.id;

  // Return the items that are present in the selected location.
  return arr.filter(function (item) {
    return item.locations.map(function (l) {
      return l.location_id;
    }).indexOf(id);
  });
}

With that and the filter in the supplied plunker, there are some similarities that could be moved into higher order functions. Eventually with some functional sauce you could probably end up with a single god function that would work both ways.

you can do this:

<select
    class="form-control"
    ng-model="vm.transaction.item"
    ng-change="itemCahngedFn()"
    ng-options="i.name for i in vm.items"> 
</select>

var itemChangedFn = function(){
    var filtredItems = [];
    angular.forEach(vm.locations, function(item){
       if(item.name == vm.transaction.item){
           filtredItems .push(item.location); 
       }
    });

   vm.locations= filtredItems ;
}

i think filter:{ id : item.locations[0].location_id } should do the trick. here is the jsfiddle

how do you think?