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>

您可以在此處查看示例