0

製品を含むjson配列があり、ng-repeatを使用してそれらをページに表示している場合。

次に、色とサイズでフィルタリングするために使用される2つの選択ボックスがあり、すべて正常に機能しています。

ただし、色でフィルタリングすると、サイズ選択ボックスに製品の配列全体のすべてのサイズが表示されたままになります。フィルタリングされたものに基づいてサイズ選択ボックスの内容を更新するにはどうすればよいですか?

4

2 に答える 2

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 を使用して、値をフィルター処理するより明確な方法があるはずです。

于 2013-02-08T15:07:05.663 に答える
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/

于 2013-02-08T14:10:49.910 に答える