Как вы можете фильтровать объекты по массиву в angularjs

Question 1

Просто интересно, можете ли вы отфильтровать существующий массив с другим массивом фильтра.

Итак, скажем, наш исходный json был:

[

   {
    "bookname": "harryporter",
    "year": "2000",
    "author":"J. K. Rowling"

   }, 

   {
    "bookname": "Sleepless",
    "year": "2003",
    "author":"Connie Ann Michael"

   },

   {
    "bookname": "No man's land",
    "year": "1993"
    "author":"Harold Pinter"

   }

];

Массив фильтров:

[
"year":"1993"
"bookname":"No man"
]

Также есть способ динамически добавлять элементы в массив при редактировании ввода, возможно, вводить текст?

Например:

Ввод

<div>
<input type="text" ng-model={{ filterArray.insert("bookname":"value") }}>Book Name
</div>

< Сильный > Фильтр

<div ng-repeat="books in originalJson | filter: filterArray">
{{books.author}}
</div>

Надеюсь, я достаточно объяснил свой вопрос, ура

javascript angularjs angularjs-ng-repeat

0

ipalibowhyte 18 Авг 2014 в 20:06

Вы не фильтруете json. json - это просто строка. вы декодируете эту строку json в собственный массив / объект JS и фильтруете это.

–

Marc B

18 Авг 2014 в 20:10

Не совсем фильтр массива или Angular, но, возможно, он близок к тому, что вы ищете в underscore.js where.

–

vch

18 Авг 2014 в 20:10

Взгляните на эту фильтрацию: stackoverflow.com/questions/11923142/… Получите значения фильтрации из ввода, а затем создайте функцию JS, которая сравнивает эти значения с данными JSON. Установите эту функцию JS как фильтр:

–

Ben Sewards

18 Авг 2014 в 20:12

Почему вы используете массив фильтров, а не объект?

–

runTarm

18 Авг 2014 в 20:15

Извините, ребята, я обновил вопрос, добавив код, по какой-то причине он не появился

–

ipalibowhyte

18 Авг 2014 в 20:18

Answer

Если вы хотите фильтровать по нескольким значениям, вы можете передать объект-фильтр.
Каждый ключ соответствует имени поля, и каждое значение фильтрует элементы на основе соответствующего ключа.

Book name: <input type="search" ng-model="filterObj.bookname" />
Year:      <input type="search" ng-model="filterObj.year" />
<div ng-repeat="book in books | filter:filterObj">...</div>

См. Также эту короткую демонстрацию .

Если вы хотите разрешить пользователю динамически указывать поле для фильтрации, вы тоже можете это сделать (хотя это не очень распространенная практика):

Filter by:
<input type="search" ng-model="dynamicField"
       placeholder="Field to filter by" />
<input type="search" ng-model="filterObj[dynamicField]"
       placeholder="Value to filter by" />
<div ng-repeat="book in books | filter:filterObj">...</div>

1

gkalpak 18 Авг 2014 в 21:37

Большое спасибо, но я хочу динамически вставлять имя каждой ng-модели для каждого ввода в массив, чтобы в моем фильтре я ссылался на эти модели, я в основном создаю динамический веб-сайт, где angualar не знает никаких входных данных до тех пор, пока добавьте их с помощью файла config.json. ваше здоровье

–

ipalibowhyte

18 Авг 2014 в 22:29

@ Pizzy213codes: Я не совсем понимаю, чего вы хотите достичь (или почему). Не может ли config.json также инициализировать filterObj? Вы изучали мою демонстрацию?

–

gkalpak

18 Авг 2014 в 22:35

Вы буквально спасли мне жизнь !!!!!!!, я был на этом уже день !!! О_о Большое спасибо, не могли бы вы порекомендовать хороший урок по angular js. Я могу использовать angualr, но не очень хорошо разбираюсь в этом :(

–

ipalibowhyte

19 Авг 2014 в 00:06

1

@ Pizzy213codes: Официальное руководство - одно из лучших. Egghead.io также имеет несколько коротких видеороликов, которые обязательно нужно посмотреть, о различных концепциях. Это руководство был моим путем в Angular (но я думаю, что это больше на уровне новичка, а вы, очевидно, не так). Убедитесь, что вы внимательно прочитали документацию (справочник по API), а оттуда вы просто code-code-code и углубитесь в исходный код.

–

gkalpak

19 Авг 2014 в 12:59

1

@ Pizzy213codes: (Вы также можете регулярно проверять журнал изменений , чтобы узнать, что изменилось и какие новые функции доступны (или в бета-версии).

–

gkalpak

19 Авг 2014 в 12:59

Question 2

Если вы хотите фильтровать по нескольким значениям, вы можете передать объект-фильтр.
Каждый ключ соответствует имени поля, и каждое значение фильтрует элементы на основе соответствующего ключа.

Book name: <input type="search" ng-model="filterObj.bookname" />
Year:      <input type="search" ng-model="filterObj.year" />
<div ng-repeat="book in books | filter:filterObj">...</div>

См. Также эту короткую демонстрацию .

Если вы хотите разрешить пользователю динамически указывать поле для фильтрации, вы тоже можете это сделать (хотя это не очень распространенная практика):

Filter by:
<input type="search" ng-model="dynamicField"
       placeholder="Field to filter by" />
<input type="search" ng-model="filterObj[dynamicField]"
       placeholder="Value to filter by" />
<div ng-repeat="book in books | filter:filterObj">...</div>

1

gkalpak 18 Авг 2014 в 21:37

Большое спасибо, но я хочу динамически вставлять имя каждой ng-модели для каждого ввода в массив, чтобы в моем фильтре я ссылался на эти модели, я в основном создаю динамический веб-сайт, где angualar не знает никаких входных данных до тех пор, пока добавьте их с помощью файла config.json. ваше здоровье

–

ipalibowhyte

18 Авг 2014 в 22:29

@ Pizzy213codes: Я не совсем понимаю, чего вы хотите достичь (или почему). Не может ли config.json также инициализировать filterObj? Вы изучали мою демонстрацию?

–

gkalpak

18 Авг 2014 в 22:35

Вы буквально спасли мне жизнь !!!!!!!, я был на этом уже день !!! О_о Большое спасибо, не могли бы вы порекомендовать хороший урок по angular js. Я могу использовать angualr, но не очень хорошо разбираюсь в этом :(

–

ipalibowhyte

19 Авг 2014 в 00:06

1

@ Pizzy213codes: Официальное руководство - одно из лучших. Egghead.io также имеет несколько коротких видеороликов, которые обязательно нужно посмотреть, о различных концепциях. Это руководство был моим путем в Angular (но я думаю, что это больше на уровне новичка, а вы, очевидно, не так). Убедитесь, что вы внимательно прочитали документацию (справочник по API), а оттуда вы просто code-code-code и углубитесь в исходный код.

–

gkalpak

19 Авг 2014 в 12:59

1

@ Pizzy213codes: (Вы также можете регулярно проверять журнал изменений , чтобы узнать, что изменилось и какие новые функции доступны (или в бета-версии).

–

gkalpak

19 Авг 2014 в 12:59

Как вы можете фильтровать объекты по массиву в angularjs

1 ответ

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript