angularjs - angular.js 绑定过滤结果以选择输入

Question

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

然后我有两个选择框用于按颜色和大小进行过滤，一切正常，

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

Answer 1

无法弄清楚如何回复上一个线程，对不起:) 这是一个修改过的小提琴：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。

Answer 2

您应该在您的范围内创建一个过滤器函数，并将其用作“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/