Angular.js - Using a filter to alter a variable

Question

This sounds simple, but googling is coming up trumps. I have a dropdown select that has multiple categories:

<select ng-model="orderProp" >
  <option ng-repeat="cats in categories" value="{{cats}}">{{cats}}</option>
</select>

I also have a map, using Angular Google Maps, which uses JSON data to plot markers. The data for these markers is called $scope.markersProperty

When a users uses the select box, I'd like to dynamically change the value of markersProperty. Using Angular's HTML {{}} I can get the results I want with a simple:

{{markersProperty|filter:orderProp}}

But I can't for the life of me work out how to get similar functionality to update the array $scope.markersProperty. Any ideas?

Why not use markersProperty as ng-model on select box?

anazimok
– anazimok

2013-04-10 01:35:09 +00:00
Commented Apr 10, 2013 at 1:35 — anazimok
– anazimok, Commented Apr 10, 2013 at 1:35

Josh David Miller · Accepted Answer · 2013-04-10 01:36:28Z

2

If you mean you want to update the scope variable, then you can use the $filter service:

.controller('MainCtrl', function ( $scope, $filter ) {
  $scope.markersProperty = // ...

  $scope.$watch( 'orderProp', function ( val ) {
    $scope.filteredMarkersProperty = $filter('filter')($scope.markersProperty, val);
  });
});

answered Apr 10, 2013 at 1:36

Josh David Miller

121k16 gold badges129 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular.js - Using a filter to alter a variable

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