Блог

Главная - Вопросы по программированию - Как мне отфильтровать ng-повтор на основе активного элемента?

Как мне отфильтровать ng-повтор на основе активного элемента?

#javascript #html #angularjs

#javascript #HTML #angularjs

Вопрос:

Я пытался разобраться в этом, но, похоже, у меня ничего не получается…

Я пытаюсь отфильтровать перечисленные проекты на основе выбранного / активного элемента из меню.

Изображение для справки: Меню сверху рядом с некоторыми проектами

Вот код:

 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. Я бы максимально отделил логику от пользовательского интерфейса. Рассмотрите возможность создания другого массива filteredItems для ng-repeat поверх этого. Затем создайте логику, которая заполняет filteredItems на основе того, что вы выбрали в меню

Ответ №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>

Комментарии:

1. Большое вам спасибо! Именно то, что я хотел. Очень прямолинейно и эффективно — хорошая работа.