Question

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

我的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('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

由于omnetpp.ini不是数组，因此您无法使用常规filter。您可以改为使用$scope.EN：

ng-if

如果您愿意ng-repeat="site in EN" ng-if="site[portfolioFilter]" - 将数据更改为数组并使用自定义过滤器：

filter

其中ng-repeat="site in sites | filter: myFilter"以这种方式定义：

myFilter

angularJS - 按键过滤JSON

1 个答案: