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

Question

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

这些值可以是 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??? */
}

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

本质上我不知道如何将值从非输入元素传递到 Angular 过滤器。

Answer 1

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

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>

您可以查看示例 here