How do I filter an ng-repeat based on an active element?

Question

I have been trying to figure this out but I just can't seem to get anywhere...

I am trying to filter the projects listed based on the selected/active element from the menu.

Image for reference:

Here is the code:

 var webApp = angular.module("webApp", []); webApp.controller("webController", function($scope) { $scope.projects = [{ image: "images/farmly.png", title: "farmly", categories: ["UX/UI Design", "Branding"], year: "2018", }, { image: "images/TRND.png", title: "TRND Global", categories: ["Branding", "Marketing", "Social Media"], year: "2019", }, { image: "images/AestheticBedrooms.jpg", title: "Aesthetic Bedrooms", categories: [ "Web Development", "UX/UI Design", "Branding", "Social Media", ], year: "2020", }, ]; });

 <div id="menuOptions"> <a class="workMenuOptions active">All</a> <a class="workMenuOptions">Branding</a> <a class="workMenuOptions">Marketing</a> <a class="workMenuOptions">Social Media</a> <a class="workMenuOptions">UX/UI Design</a> <a class="workMenuOptions">Web Development</a> </div> <div class="presentedWork"> <div class="project" ng-repeat="project in projects | limitTo: 4 | filter: {categories: 'Branding' } | orderBy: 'year';"> <div class="projectContent"> <img src="{{project.image}}"> <h3>{{project.title}}</h3> <p> <span class="categorySpan" ng-repeat="category in project.categories | orderBy: category"> {{category}}<span class="categorySpan" ng-if="!$last">, </span> </span> | <span>{{project.year}}</span> </p> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>

How can I filter the ng-repeat to show projects based on the selected menu element only? Currently, there is a manual filter that is filtering by 'Branding'.

Thanks in advance!

Answer 1

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.filterName = ''; $scope.projects = [{ image: "https://picsum.photos/200/300", title: "farmly", categories: ["UX/UI Design", "Branding"], year: "2018", }, { image: "https://picsum.photos/200/300", title: "TRND Global", categories: ["Branding", "Marketing", "Social Media"], year: "2019", }, { image: "https://picsum.photos/200/300", title: "Aesthetic Bedrooms", categories: [ "Web Development", "UX/UI Design", "Branding", "Social Media", ], year: "2020", }, ]; }); app.filter('myFilter', function() { return function(x, y) { if (y.filterName === '') return x; else { return x.filter(function(item) { return item.categories.includes(y.filterName) }) } } })

 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <div> <button class="workMenuOptions active" ng-click="filterName=''">All</button> <button ng-click="filterName='Branding'" class="workMenuOptions">Branding</button> <button ng-click="filterName='Marketing'" class="workMenuOptions">Marketing</button> <button ng-click="filterName='Social Media'" class="workMenuOptions">Social Media</button> <button ng-click="filterName='UX/UI Design'" class="workMenuOptions">UX/UI Design</button> <button ng-click="filterName='Web Development'" lass="workMenuOptions">Web Development</button> </div> <br/> <div class="presentedWork"> <div class="project" ng-repeat="project in projects | limitTo: 4 | myFilter : {filterName } | orderBy: 'year';"> <div class="projectContent"> <img src="{{project.image}}"> <h3>{{project.title}}</h3> <p> <span class="categorySpan" ng-repeat="category in project.categories | orderBy: category"> {{category}}<span class="categorySpan" ng-if="!$last">, </span> </span> | <span>{{project.year}}</span> </p> </div> </div> </div> </div> </body> </html>

How do I filter an ng-repeat based on an active element?

Question

1 answers

solution1
1 ACCPTED 2020-09-15 12:40:04

How do I filter an ng-repeat based on an active element?

Question

1 answers

solution1 1 ACCPTED 2020-09-15 12:40:04

solution1
1 ACCPTED 2020-09-15 12:40:04