Угловые элементы условного переноса ng-repeat в элементе (элементы фильтра в группе ng-repeat)

Question

Угловые элементы условного переноса ng-repeat в элементе (элементы фильтра в группе ng-repeat)

0

Я пытаюсь скрыть имя профессии, когда пользователь фильтра не найден в какой-либо профессии.

JS:

$scope.contacts = [
    {name: 'John', occupation: 'occupation 1'},
    {name: 'George', occupation: 'occupation 2'},
    {name: 'Jeck', occupation: 'occupation 3'},
    {name: 'Paula', occupation: 'occupation 1'},
    {name: 'Scruath', occupation: 'occupation 3'}
];

HTML:

<input type="text" ng-model="query">
<div ng-repeat="(key, occupation) in contacts | groupBy: 'occupation'">
    <p ng-bind="occupation[0].occupation"></p>
    <div>
        <div ng-repeat="contact in occupation | filter:search">
            <p ng-bind="::contact.fullName"></p>
            <p ng-bind="::contact.email"></p>
        </div>
    </div>
</div>

РЕЗУЛЬТАТ:

Род занятий Имя: "Occupation 1"

имя: "Джон"
имя: "Паула"

Род занятий Имя: "Occupation 2"

имя: "Джордж"

Род занятий Имя: "Occupation 3"

имя: "Jeck"
имя: "Scruath"

Есть предположения?

Arsen Babajanyan 24 март 2016, в 10:36

Источник

0

Это то, что вы хотите, если вы напишите занятие 1 в текстовом поле, тогда результатом будет имя: "Джон" имя: "Паула"
Hassan Tariq 24 март 2016, в 09:15
0

Именно так! Но моя проблема в том, что занятие 2 и занятие 3 не скрываются
Arsen Babajanyan 24 март 2016, в 09:19
0

Фактически фильтр реализует поиск, если вы напишите занятие 1, тогда данные занятия 2 и занятия 3 будут скрыты
Hassan Tariq 24 март 2016, в 09:21
0

при вводе занятия 1 имя «Джордж» будет скрыто, а название занятия: «занятие 2» не скрывается
Arsen Babajanyan 24 март 2016, в 09:21
0

ng-repeat="(key, occupation) in contacts" - это нотация, используемая при работе с парами (ключ, значение) в главном объекте, здесь вы используете массив объектов. Вам следует изменить модель данных в соответствии с вашими потребностями, например, использовать отдельную модель данных для идентификации ваших контактов по профессиям.
A. Gille 24 март 2016, в 09:27

Показать ещё 3 комментария

Теги:

javascript

angularjs

angularjs-ng-repeat

1 ответ

Ещё вопросы

Это то, что вы хотите, если вы напишите занятие 1 в текстовом поле, тогда результатом будет имя: "Джон" имя: "Паула"
Именно так! Но моя проблема в том, что занятие 2 и занятие 3 не скрываются
Фактически фильтр реализует поиск, если вы напишите занятие 1, тогда данные занятия 2 и занятия 3 будут скрыты
при вводе занятия 1 имя «Джордж» будет скрыто, а название занятия: «занятие 2» не скрывается
ng-repeat="(key, occupation) in contacts" - это нотация, используемая при работе с парами (ключ, значение) в главном объекте, здесь вы используете массив объектов. Вам следует изменить модель данных в соответствии с вашими потребностями, например, использовать отдельную модель данных для идентификации ваших контактов по профессиям.

Stepan Kasyanenko · Accepted Answer · 2016-03-24T10-35-00.000Z

Есть два решения вашей проблемы:

Используйте ng-show в фильтрованном массиве.
Используйте сортировку в верхнем ng-repeat.

Живой пример на jsfiddle.

angular.module('ExampleApp', ['angular.filter'])
  .controller('ExampleController', function($scope) {
    $scope.contacts = [{
      name: 'John',
      occupation: 'occupation 1'
    }, {
      name: 'George',
      occupation: 'occupation 2'
    }, {
      name: 'Jeck',
      occupation: 'occupation 3'
    }, {
      name: 'Paula',
      occupation: 'occupation 1'
    }, {
      name: 'Scruath',
      occupation: 'occupation 3'
    }];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <input type="text" ng-model="query">
    <h3>
    Filter with new array filtered
    </h3>
    <div ng-repeat="(key,occupation) in contacts| groupBy: 'occupation'" ng-show="filterOccupation.length">

      <p ng-bind="key"></p>
      <div>
        <div ng-repeat="contact in filterOccupation = (occupation|filter:query)">
          <p ng-bind="::contact.name"></p>
        </div>
      </div>
    </div>

    <h3>
    Filter with extra filtered
    </h3>
    <div ng-repeat="(key,occupation) in contacts|filter:query | groupBy: 'occupation'">

      <p ng-bind="key"></p>
      <div>
        <div ng-repeat="contact in occupation|filter:query ">
          <p ng-bind="::contact.name"></p>
        </div>
      </div>
    </div>
  </div>
</div>