AngularJS-从非输入元素获取值以通过列表进行过滤

Question

I'm trying to retrieve a value from an "li" element, depending on which one the user clicked on, which is responsible for setting the radius on a map and display search results.

These values will either be 5,10,25,50 or 100. This number then needs to be passed to a custom filter which will filter the search results.

HTML

<ul class="cf" id="filter">
  <li ng-click="getRadius(5)" class="current"><a href="#">5 km</a></li>
  <li ng-click="getRadius(10)"><a href="#">10 km</a></li>
  <li ng-click="getRadius(25)"><a href="#">25 km</a></li>
  <li ng-click="getRadius(50)"><a href="#">50 km</a></li>
  <li ng-click="getRadius(100)"><a href="#">100 km</a></li>
</ul>

On the search results, further down, I then want to call the filter.

<li ng-repeat="store in stores | orderBy:'-d':true" ng-click="storeListClick(store)">
  <h3>{{ store.store_name }} <small>{{store.d}}km</small></h3>
  <p>{{ store.address1 }}, {{ store.address2 }}
  <br> {{ store.city }}</p>
</li>

app.js

$scope.getRadius = function(radius) {
   console.log(radius); // correctly gets radius value
   /* How do I make a custom filter here??? */
}

Inside the custom filter it will compare the distance between searched query and the store location. I'm not sure if this is the correct way to go about this, or whether I'm on the complete wrong track.

Essentially I do not know how to pass a value from a non-input element to an angular filter.

Answer 1

You don't really need to retrieve a value from an element. You can have the current radius value saved in your controller and use it either to filter the store list immediately, or in a custom filtering function. A custom filter could look like this.

angular.module('test', []).controller('main', ['$scope', function ($scope) {

    var currentRadius = 100;

    $scope.getRadius = function (r) {
        currentRadius = r;
    };

    // this is the custom filter
    $scope.radius = function (store) {
        return store.distance <= currentRadius;
    };

    //other stuff...

}]);

You can then use the filtering function in the HTML like this:

<ul>
    <li ng-repeat="store in stores | filter: radius">some store data</li>
</ul>

You can check out an example here