Угловой фильтр по вводу текста и флажок

Question

Угловой фильтр по вводу текста и флажок

0

У меня есть повтор ng, который я успешно фильтрую с помощью ввода. У меня также есть 3 флажка, относящиеся к данным, которые я хочу использовать, чтобы отфильтровать определенные результаты. Я попытался поместить все поля в массив (таким же образом, что вы бы orderBy), но это, похоже, не помогает.

Как я могу достичь желаемого результата?

Мой шаблон выглядит так:

<input ng-model="searchByName.name" type="text" placeholder="Search by name" autofocus>
<ul class="list">
    <li class="item item-toggle">
       ATM
         <input type="checkbox" value="1" ng-model="hasATM.atm">
    </li>
    <li class="item item-toggle">
       Power
         <input type="checkbox" value="1" ng-model="hasPower.power">
    </li>
    <li class="item item-toggle">
       Water
         <input type="checkbox" value="1" ng-model="hasWater.water">
    </li>
</ul>


<ion-list>
    <ion-item class="item-remove-animate item-icon-right" ng-repeat="harbour in harbours | filter:[searchByName, hasATM, hasPower, hasWater] | orderBy:[sortOption, 'distance']" type="item-text-wrap" href="#/tab/harbours/{{harbour.id}}">
        <h2>{{harbour.name}}</h2>
    </ion-item>
</ion-list>

И мои данные в формате:

"harbours": [
        {
        "id": 3,
        "name": "Lorem",
        "latitude": 51.000000,
        "longitude": 0.000000,
        "mooring": 3,
        "swimming": 2,
        "shopping": 4,
        "dining": 5,
        "nightlfe": 3,
        "noise": 1,
        "water": 0,
        "power": 0,
        "atm": 1,
        "distance": 0,
        "description": "lorem ipsum",
        "image":"tmp.jpg"
      }, {
        "id": 4,
        "name": "Ipsum",
        "latitude": 52.00000,
        "longitude": 0.00000,
        "mooring": 3,
        "swimming": 4,
        "shopping": 4,
        "dining": 5,
        "nightlfe": 1,
        "noise": 5,
        "water": 0,
        "power": 0,
        "atm": 1,
        "distance": 0,
        "description": ""
      }
]

Использование только "searchByName" в качестве моего фильтра (не в массиве) отлично работает, но когда я пытаюсь использовать и каждый из флажков самостоятельно, datalist просто исчезает.

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

Как я могу добиться поиска по имени и фильтрации флажков?

спасибо

Fraser 27 сен. 2015, в 19:47

Источник

0

создать собственный фильтр
charlietfl 27 сен. 2015, в 17:32

Теги:

ionic-framework

angularjs

1 ответ

Ещё вопросы

Ilya Dmitriev · Accepted Answer · 2015-09-27T17-01-00.000Z

Я думаю, что гораздо проще хранить все ваши фильтры в одном объекте (например, я буду использовать переменную yourFilter в примере). При таком подходе вы можете просто передать свою переменную для filter.

Следующий вопрос здесь, что ваши флажки хранят false или true значение, потому что тег value, который вы применили к ним, не имеет никакого эффекта. И если вы выберете один из флажков, любой результат не будет найден, потому что все ваши логические поля имеют 0 или 1 значение. Чтобы изменить формат сохраненного значения флажков, вы должны реорганизовать их с помощью ng-true-value и ng-false-value, чтобы они могли использоваться для фильтрации ваших данных.

После этого ваш шаблон с поисковыми вводами будет выглядеть так:

<input type="text" ng-model="yourFilter.name" placeholder="Search by name"/>
<ul>
  <li>
   ATM
   <input type="checkbox" ng-model="yourFilter.atm" ng-true-value="1" ng-false-value="0"/>
  </li>
  <li>
   Power
   <input type="checkbox" ng-model="yourFilter.power" ng-true-value="1" ng-false-value="0"/>
  </li>
  <li>
   Water
   <input type="checkbox" ng-model="yourFilter.water" ng-true-value="1" ng-false-value="0"/>
  </li>
</ul>

<ul>
  <li ng-repeat="harbour in harbours | filter:yourFilter">
    <h2>{{harbour.name}}</h2>
  </li>
</ul>

Пример по плункеру.

Документация о вводе [флажок].

Помните, что после загрузки страницы флажки не влияют на результаты фильтрации. И если вы хотите отфильтровать свое значение по умолчанию, вы должны использовать директиву ng-init.

<input type="checkbox" ng-model="yourFilter.water" ng-init="yourFilter.water = '0'" ng-true-value="1" ng-false-value="0"/>

Слишком просто :) Ты гений. Спасибо!
На ту же тему. Есть ли в любом случае значение false в качестве подстановочного знака, поэтому, когда вы снимите флажок, вы получите значения atm / power / water, соответствующие 1 ИЛИ 0?
@ Fraser, если честно, я не знаю. И, может быть, это немного сложно, будет лучше создать собственный фильтр для фильтрации данных таким образом. Или вы можете переместить эту логику в функцию в вашем контроллере. В этой функции вы можете отформатировать ваш объект фильтра любым способом. Я создал вантуз здесь . Посмотрите на функцию formatFilterInANiceWay которая используется для форматирования необходимого объекта для filter и вы можете использовать его следующим образом: <li ng-repeat="harbour in harbours | filter: ctrl.formatFilterInANiceWay(yourFilter)"> .
Вот пример с пользовательским фильтром. Это должно быть реорганизовано, но я надеюсь, что вы поймете идею.