angular.js绑定筛选结果以选择输入

时间:2013-02-08 13:59:42

标签: angularjs

如果我有一个包含我的产品的json数组,并且正在使用ng-repeat在页面上显示它们。

然后我有两个选择框用于按颜色和大小进行过滤,这些都可以正常工作,

但是,如果我按颜色过滤尺寸选择框仍然显示整个产品系列的所有尺寸,我该如何根据过滤后的尺寸选择框刷新内容?

2 个答案:

答案 0 :(得分:2)

无法弄清楚如何回复上一个帖子,抱歉:) 这是一个修改过的小提琴:http://jsfiddle.net/q7EkY/7/

$scope.color = '';
$scope.size = '';
$scope.colors = function () {
    var colors = [];
    for (var i = 0; i < $scope.items.length; i++) {
       if (colors.indexOf($scope.items[i].colour) == -1) colors.push($scope.items[i].colour);
    }
    return colors;
};

$scope.sizes = function () {
    var sizes = [];
    for (var i = 0; i < $scope.items.length; i++) {
       if ((!$scope.color || $scope.items[i].colour == $scope.color) && sizes.indexOf($scope.items[i].size) == -1) sizes.push($scope.items[i].size);
    }
    return sizes;
}

$scope.doFilter = function () {
    var filter = {};
    if ($scope.color) filter.colour = $scope.color;
    if ($scope.size) filter.size = $scope.size;
    return filter;
}

模板:

<div ng-controller="myCtrl">
    <select ng-model="color" ng-options="c for c in colors()">
        <option value="">Colour</option>
    </select>
    <select ng-model="size" ng-options="s for s in sizes()">
        <option value="">Size</option>
    </select>
    <div ng-repeat="item in items | filter:by_colour | filter:doFilter()">
        {{ item.title }}
    </div>
</div>

我认为应该有更明确的方法来过滤值,例如使用_.js。

答案 1 :(得分:1)

您应该在范围中创建过滤器函数,并将其用作“a | filter”的参数 以下是使用它的简短示例:

查看:

<div ng-controller="myCtrl">
<div ng-repeat="item in items | filter:doFilter()">
    {{ item.title }}
</div>
<div>Is filter active? <input type="checkbox" ng-model="filterActive"/></div>

控制器:

var myApp = angular.module('myApp',[]);

myApp.controller('myCtrl', function ($scope) {
    $scope.items = [{
        title: 'First item',
        active: true
    }, {
        title: 'Second item',
        active: false
    }];
    $scope.doFilter = function () {
        if ($scope.filterActive) return { active: true };
        return {};
    }
});

http://jsfiddle.net/q7EkY/1/