Составьте список с помощью ng-repeat, разделенного «пользовательскими категориями» (AngularJS) - PullRequest
Новая
       37

Составьте список с помощью ng-repeat, разделенного «пользовательскими категориями» (AngularJS)

1 голос
/ 15 октября 2019

Мне нужно создать список со значениями, которые люди будут вводить в список, и мне нужно отображать их отдельно по категориям, единственная проблема в том, что я не знаю, для какой категории они будут использоватькаждый элемент, поэтому категории пользовательские значения . Вот пример того, как я хочу отобразить список:

Категория 1:
- Элемент 1
- Элемент 2
- Элемент 3

Категория 2:
- Элемент 1
- Элемент 2
- Элемент 3

Категория, изобретенная мной:
- Элемент 1
- Элемент 2

Я попытался сделать ng-repeat элементов с фильтром, чтобы избежать всех дублированных категорий. Затем я показываю заголовок категории, а под заголовком другой ng-repeat сейчас, чтобы показать элементы этой категории, но с помощью ng-if, чтобы отфильтровать только те, которые соответствуют категории предыдущего ng-repeat: 

<div ng-repeat="x in elements | unique:'Category'">
     <h2>{{x.Category}}</h2>
     <div class="element" ng-repeat="y in elements" ng-if="y.Category === {{x.Category}}">
        <p class="click-text">{{y.Title}}</p>
     </div>
</div>

Я знаю, что это беспорядок ... Мне нужна помощь в поиске реального решения.

Вот пример массива элементов: 

[{
  "Category": "Category 1",
  "Title": "Title example",
  "Comments": "Example comments"
},
{
  "Category": "Category 1",
  "Title": "My cat is named George",
  "Comments": "Example comments"
},
{
  "Category": "Category 1",
  "Title": "Hocus pokus",
  "Comments": "Example comments"
},
{
  "Category": "Category 2",
  "Title": "7 projects going LIVE now",
  "Comments": "Example comments"
},
{
  "Category": "Category 2",
  "Title": "Batman vs Superman was a good movie",
  "Comments": "Example comments"
},
{
  "Category": "Category 2",
  "Title": "projects (more)",
  "Comments": "Example comments"
},
{
  "Category": "Category invented by me",
  "Title": "Remember, remember the fifth of november",
  "Comments": "Hello there!"
},
{
  "Category": "Category invented by me",
  "Title": "It's night, electric night",
  "Comments": "General Kenobi"
}]

1 Ответ

0 голосов
/ 15 октября 2019

Вы можете группировать элементы по категориям в объекте и выполнять итерацию по свойствам объекта. См. «Перебор свойств объекта» в документации ngRepeat .

Когда вы добавляете новый элемент, вы можете добавить его и к объекту (в массиве рядом с категорией нового элемента).

Ниже приведена рабочая демонстрация (обратите внимание, как в функции vm.init создается сопоставление категорий с соответствующими элементами): 

angular
  .module('elementsApp', [])
  .controller('elements', function() {
    var vm = this;
    vm.elements = [{
        "Category": "Category 1",
        "Title": "Title example",
        "Comments": "Example comments"
      },
      {
        "Category": "Category 1",
        "Title": "My cat is named George",
        "Comments": "Example comments"
      },
      {
        "Category": "Category 1",
        "Title": "Hocus pokus",
        "Comments": "Example comments"
      },
      {
        "Category": "Category 2",
        "Title": "7 projects going LIVE now",
        "Comments": "Example comments"
      },
      {
        "Category": "Category 2",
        "Title": "Batman vs Superman was a good movie",
        "Comments": "Example comments"
      },
      {
        "Category": "Category 2",
        "Title": "projects (more)",
        "Comments": "Example comments"
      },
      {
        "Category": "Category invented by me",
        "Title": "Remember, remember the fifth of november",
        "Comments": "Hello there!"
      },
      {
        "Category": "Category invented by me",
        "Title": "It's night, electric night",
        "Comments": "General Kenobi"
      }
    ];
    vm.newElement = {};
    vm.elementGroups = {};

    vm.addElement = function(e) {
      vm.elements.push(e);
      vm.elementGroups[e.Category] = vm.elementGroups[e.Category] || [];
      vm.elementGroups[e.Category].push(e);
      vm.newElement = {};
    };

    vm.init = function() {
      vm.elements.forEach(e => {
        vm.elementGroups[e.Category] = vm.elementGroups[e.Category] || [];
        vm.elementGroups[e.Category].push(e);
      });
    };


  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="elementsApp">
  <div ng-controller="elements as ctrl" ng-init="ctrl.init()">
    <form ng-submit='ctrl.addElement(ctrl.newElement)'>
      <input ng-model="ctrl.newElement.Title" placeholder='Title' required>
      <input ng-model="ctrl.newElement.Category" placeholder='Category' required>
      <button type='submit'>Add</button>
    </form>

    <div ng-repeat="(category, elements) in ctrl.elementGroups">
      <h2>{{category}}</h2>
      <div ng-repeat="element in elements">
        {{element.Title}}
      </div>
    </div>
  </div>
</div>
...