Угловой фильтр с использованием ng-repeat

если вы посмотрите на планкр http://plnkr.co/edit/ilNYwiTwJIwe5HwteErz?p=preview

<select ng-model="query.type">
<li ng-repeat="tech in techs | filter : query">

У меня есть сомнения, как в ng-модели и выражении фильтра вещь «запрос» (из-за отсутствия лучшего понимания) получает поле типа. Что такое «запрос». Можем ли мы его утешить? И как формируется ассоциация query.type‹---->query.

Я прекрасно следую логическому выводу семантического объявления кода, например:

<div ng-repeat="tech in techs | filter: { type : 'mvc' }">

который хорошо бьет по голове. Любое подробное объяснение по этому поводу? Спасибо.


angularjs angularjs-ng-repeat angular-filters
person Subhranshu    schedule 20.10.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Во-первых, вам нужно понять, что type это String.

Если вы хотите узнать, что такое query, вы можете добавить ng-change к своему select, например:

<select ng-model="query.type" ng-change="consoleQuery()">

И в контроллере:

 $scope.consoleQuery = function () {
   console.log($scope.query);
 }

Итак, теперь, после выбора некоторого значения из select, вы увидите в консоли, что query является Object: Object {type: "mvp"}

Итак, когда вы используете в ng-repeat query вот так:

<li ng-repeat="tech in techs | filter : query">

это означает то же самое, если вы наберете следующее (см. также Demo):

<li ng-repeat="tech in techs | filter : {type : query.type}">

В последнем коде вы создадите Object со свойством type и его значением будет query.type. Но поскольку query является Object, содержащим только 1 свойство type, мы можем использовать его в ng-repeat.

Демонстрация: http://plnkr.co/edit/8poVKiFWuOjiNFO485Xy?p=preview

Надеюсь, это объяснит вам, что происходит.

person ababashka    schedule 20.10.2014
comment
спасибо, теперь я вижу, что «запрос» становится объектом, когда у меня есть query.type и простая строка, когда у меня есть только запрос. - person Subhranshu; 22.10.2014

arrow_upward
0
arrow_downward

Если вы печатаете выражение фильтра следующим образом:

<select ng-model="query.type"> {{query}}

вы увидите, что query — это обычный объект javascript:

{type: 'mvc'}

Поэтому, когда вы используете такой фильтр, как ng-repeat="tech in techs | filter : query, вы в основном предоставляете переменную, которая представляет собой объект со свойствами для фильтрации.

person dfsq    schedule 20.10.2014
comment
Другими словами, запрос — это переменная, прикрепленная к области видимости, которая изменяется с помощью ng-modal при выборе. - person ryanlutgen; 20.10.2014
comment
Да, это просто переменная области видимости. - person dfsq; 20.10.2014
comment
dsfq - я не смог напечатать выражение, которое вы упомянули, не могли бы вы поделиться кодом или plunkr. Также мой вопрос был больше нацелен на связь между запросом (в ng-repeat) и query.type (в ng-модели). Также между запросом и технологией. И самое главное Как? - person Subhranshu; 20.10.2014