Question

我试图从＆＃34; li＆＃34;中检索一个值。元素，取决于用户单击哪一个，负责在地图上设置半径并显示搜索结果。

这些值将是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>

您可以查看示例here

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

1 个答案: