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

你應該在你的範圍創建過濾器功能，並把它作爲一個參數「一|過濾器」 下面是使用這個的一個簡單的例子：

查看：

<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/