angularJS - фильтрация JSON по ключу

Question

angularJS - фильтрация JSON по ключу

0

У меня есть набор данных JSON, который я хочу фильтровать по значению опции выбора. Я привязал выбор к 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
            }
        };
    }]);

Miha Šušteršič 20 июль 2016, в 12:45

Источник

0

Почему бы не вместо каждого портфеля в качестве имущества поместить его в один объект?
Bon Macalindong 20 июль 2016, в 10:44
0

Привет, Бон, я не думаю, что следую, как это изменит работу фильтра? Я могу изменить набор данных, так как на данный момент это статический
Miha Šušteršič 20 июль 2016, в 10:46
0

Затем вы можете использовать этот фильтр следующим образом: ng-repeat="site in EN | filter: { portfolioType: portfolioFilter }" , portfolioType - это ваше новое свойство, если вы когда-нибудь решите его изменить. Таким образом, возможные значения portfolioType будут (все, github, hasDemo и готово)
Bon Macalindong 20 июль 2016, в 10:50
0

Я также заметил, что $ scope.EN - это не массив. У вас нет []
Bon Macalindong 20 июль 2016, в 10:56
0

ах, проблема в том, что они не являются исключительными, так что можно иметь GitHub, быть законченным и классифицироваться как все
Miha Šušteršič 20 июль 2016, в 10:57

Показать ещё 3 комментария

Теги:

javascript

angularjs

json

angularjs-filter

1 ответ

Ещё вопросы

Почему бы не вместо каждого портфеля в качестве имущества поместить его в один объект?
Привет, Бон, я не думаю, что следую, как это изменит работу фильтра? Я могу изменить набор данных, так как на данный момент это статический
Затем вы можете использовать этот фильтр следующим образом: ng-repeat="site in EN | filter: { portfolioType: portfolioFilter }" , portfolioType - это ваше новое свойство, если вы когда-нибудь решите его изменить. Таким образом, возможные значения portfolioType будут (все, github, hasDemo и готово)
Я также заметил, что $ scope.EN - это не массив. У вас нет []
ах, проблема в том, что они не являются исключительными, так что можно иметь GitHub, быть законченным и классифицироваться как все

Alec Kravets · Accepted Answer · 2016-07-20T09-54-00.000Z

Вы не можете использовать регулярный filter так как $scope.EN не является массивом. Вы можете использовать ng-if вместо:

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

Если вы предпочитаете filter - измените данные как массив и используйте специальный фильтр:

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

где myFilter определяется следующим образом:

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

Есть ли проблемы с производительностью при выборе между ними, или они в основном делают то же самое?
Я не думаю, что вы когда-нибудь заметите разницу. Оба подхода делают одно и то же - но на разных уровнях.