时间戳

首页 > 解决方案 > 如何根据活动元素过滤 ng-repeat？

javascript - 如何根据活动元素过滤 ng-repeat？

问题描述

我一直试图弄清楚这一点，但我似乎无法到达任何地方......

我正在尝试根据菜单中的选定/活动元素过滤列出的项目。

图片供参考： 一些项目旁边的菜单

这是代码：

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仅根据所选菜单元素过滤以显示项目？目前，有一个手动过滤器按“品牌”过滤。

提前致谢！

标签： javascripthtmlangularjs

解决方案

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>

推荐阅读