javascript - angularJS - 按键过滤 JSON

Question

我有一个 JSON 数据集，我想按选择选项值进行过滤。我已将选择绑定(bind)到 ng-model，但现在我无法使过滤器工作。我做错了什么？

我的html:

<div class="row portfolio" ng-controller="portfolioController">
    <div class="small-12 portfolioFilterContainer">
        <label class="portfolioFilterLabel">Filter:
            <select class="portfolioFilterSelect" ng-model="portfolioFilter">
                <option value="all">All</option>
                <option value="gitHub">Has repository</option>
                <option value="hasDemo">Has a working demo</option>
                <option value="finished">Finished</option>
            </select>
        </label>
    </div>
    <div class="small-12">
        <div class="row siteContainer" ng-repeat="site in EN | filter: portfolioFilter">
            <div class="small-4 columns">
                <img ng-if="site.left" class="portfolioSiteImage" ng-src="{{site.img}}">
            </div>
            <div class="small-8 columns">
                <h1 class="portoflioSiteHeading"><a href="#">{{site.heading}}</a></h1>
                <p class="portfolioSiteParagraph">{{site.desc}}</p>
            </div>
            <div class="small-4 columns">
                <img ng-if="!site.left" class="portfolioSiteImage" ng-src="{{site.img}}">
            </div>
        </div>
    </div>
</div>

我的 Controller :

.controller('portfolioController', ['$scope', function($scope) {
        $scope.portfolioFilter = 'all';
        $scope.EN = {
            w1: {
                img: "http://lorempixel.com/400/400",
                heading: "mySite",
                desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.",
                left: true,
                gitHub: false,
                hasDemo: false,
                finished: false,
                all: true
            },
            w2: {
                img: "http://lorempixel.com/400/400",
                heading: "mySite",
                desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.",
                left: false,
                gitHub: false,
                hasDemo: false,
                finished: false,
                all: true
            },
            w3: {
                img: "http://lorempixel.com/400/400",
                heading: "mySite",
                desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.",
                left: true,
                gitHub: false,
                hasDemo: false,
                finished: false,
                all: true
            },
            w4: {
                img: "http://lorempixel.com/400/400",
                heading: "mySite",
                desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.",
                left: false,
                gitHub: false,
                hasDemo: false,
                finished: false,
                all: true
            }
        };
    }]);

Answer 1

您不能使用常规的过滤器，因为$scope.EN 不是数组。您可以使用 ng-if 代替:

ng-repeat="site in EN" ng-if="site[portfolioFilter]"

如果您更喜欢过滤器 - 将数据更改为数组并使用自定义过滤器:

ng-repeat="site in sites | filter: myFilter"

其中 myFilter 的定义方式如下:

$scope.myFilter = function(val) {
    return val[$scope.portfolioFilter];
}