Question

我在视图上有一个带有AngularJS的ASP.NET MVC站点，我需要使用AngularJS基于某些控件对列表进行过滤。以下是控件：

用作搜索的输入文本框，但用作列表的角度模型。目前列表是格式，但我打算将其更改为div。
一个列表（现在将在以后显示为div）绑定到输入搜索框（ng-model），但也会根据搜索框进行过滤以处理分页。
Angular Bootstrap UI分页控件，用于管理搜索框以及滑块的分页。
自定义Angular滑块（应该是现在的问题）应该根据价格组件过滤列表。

目前，该列表是通过Angular的http ajax调用提供的，该调用填充了具有许多属性的JSON对象列表。该列表目前通过JSON对象上的Location属性从输入搜索框中过滤掉（尽管它在您键入时自动执行此操作，它会找到位置属性并对其进行过滤 - 我很困惑，因为我是新的到AngularJS，因为我没有明确告诉它过滤Location属性。）

问题是我还希望它根据JSON对象上的Price属性过滤列表。在我的代码中，我尝试通过自定义过滤器和手表来做到这一点，但似乎没有一个工作。我还希望更新分页，因为列表会缩小，就像输入搜索框一样。

因此，列表必须通过输入搜索框和滑块进行过滤（如果我打算稍后更新，可能会选中复选框或下拉列表，但现在只需按价格滑块和输入搜索框过滤列表）。

这是我的代码：

HTML

<div data-ng-app="dealsPage">
<input type="text" data-ng-model="cityName" />
<div data-ng-controller="DestinationController">
    <ul>
        <li data-ng-repeat="deals in destinations | startFrom:(currentPage - 1)*pageSize | limitTo:pageSize | priceSorter:curLow:curHigh">{{deals.Location}} -- {{deals.Price}}</li>
    </ul>
    <br />
    <pagination rotate="true" num-pages="noOfPages" current-page="currentPage" max-size="maxSize" class="pagination-small" boundary-links="true"></pagination>
    <br />
    <slider min="{{min}}" max="{{max}}" low="curLow" high="curHigh" round="2" step="0.25" translate="translate(val)"></slider>
    <br />
    Value: {{curLow}} -- {{curHigh}}
    <br />
    Range: {{range}}
</div>

AngularJS

var destApp = angular.module('dealsPage', ['ui.bootstrap']);
var sliderDirective;

destApp.controller('DestinationController', function ($scope, $http, $filter) {
        $scope.destinations = {};
    $scope.filteredDestinations = {};

    $scope.min = 300;
    $scope.max = 1000;
    $scope.curLow = 320;
    $scope.curHigh = 980;
    $scope.translate = function (val) { return val + "&deg; C"; };
    $scope.range = 0;

    $http.get('/Deals/GetDeals').success(function (data) {
        $scope.destinations = data;
    });

    $scope.pageSize = 10;
    $scope.maxSize = 5;

    //Watch for pagination based on the input search box.
    $scope.$watch('cityName', function (newCityName) {
        $scope.currentPage = 1;
        $scope.filteredDestinations = $filter('filter')($scope.destinations, $scope.cityName);
        $scope.noOfPages = isNaN($scope.filteredDestinations.length / 10) ? 200 : $scope.filteredDestinations.length / 10;
    });

    //These two watches are for the slider controls to observe pagination, but should I use the list filtereing logic in here and how?
    $scope.$watch('curLow', function (newValue) {
        $scope.range = Math.round($scope.curHigh - newValue);                
        $scope.filteredDestinations = $filter('filter')($scope.destinations, $scope.range);
        $scope.noOfPages = isNaN($scope.filteredDestinations.length / 10) ? 200 : $scope.filteredDestinations.length / 10;
    });

    $scope.$watch('curHigh', function (newValue) {
        $scope.range = Math.round(newValue - $scope.curLow);
        $scope.filteredDestinations = $filter('filter')($scope.destinations, $scope.range);
        $scope.noOfPages = isNaN($scope.filteredDestinations.length / 10) ? 200 : $scope.filteredDestinations.length / 10;
    });});

    destApp.directive('slider', function ($timeout, $compile)....//Code for slider here);

    destApp.filter('startFrom', function () {
    return function (input, start) {
        start = +start; //parse to int
        return input.slice(start);
    };
});

destApp.filter('priceSorter', function () {
    var filteredInput = new Array();
    return function (input, curLow, curHigh) {
        for (var x = 0; x <= input.length; x++) {
            if ((input[x].Price > curLow) && (input[x].Price < curHigh)) {
                filteredInput.push(input[x]);
            }
        }

        //This should work as I can see the filtering taking place, but the list does not get rendered on the view!
        return filteredInput;
    };});

我想把滑块设为ng模型，因为我希望它通过Price属性过滤ul列表，但我不知道如何将滑块设为ng模型。

在任何情况下，我都觉得过滤是这里的一种方式，因为我的自定义过滤器会被调用，并且我能够如图所示执行自定义逻辑，但是在更改之后不会呈现新数组被过滤了。

非常感谢，

本。

绑定到具有分页的滑块时，列表过滤在AngularJS中不起作用

0 个答案: