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

Question

我正在尝试从“ li”元素中检索一个值，具体取决于用户单击了哪个元素，该元素负责在地图上设置半径并显示搜索结果。

这些值将为5、10、25、50或100。然后需要将此数字传递到自定义过滤器，该过滤器将过滤搜索结果。

的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>

在搜索结果上，再往下，我要调用过滤器。

<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??? */
}

在自定义过滤器内部，它将比较搜索到的查询和商店位置之间的距离。 我不确定这是否是解决此问题的正确方法，或者我是否走在错误的轨道上。

本质上，我不知道如何将值从非输入元素传递到角度滤波器。

Answer 1

您实际上并不需要从元素中检索值。 您可以将当前半径值保存在控制器中，并使用它立即过滤商店列表或在自定义过滤功能中使用。 自定义过滤器可能如下所示。

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...

}]);

然后，您可以像下面这样在HTML中使用过滤功能：

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

您可以在此处查看示例