如何根据活动元素过滤 ng-repeat？
[英]How do I filter an ng-repeat based on an active element?
问题描述
我一直在试图解决这个问题，但我似乎无处可去......
我正在尝试根据菜单中的选定/活动元素过滤列出的项目。
图片供参考：
这是代码：
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>
如何过滤ng-repeat以仅根据所选菜单元素显示项目？ 目前，有一个手动过滤器按“品牌”进行过滤。
提前致谢！
1 个解决方案
解决方案1
1 已采纳 2020-09-15 12:40:04
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>
如何从与ng-repeat相同的元素上的另一个指令访问ng-repeat的作用域？
[英]How do I access ng-repeat's scope from another directive on the same element that ng-repeat is on?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.