angular ng-повторный фильтр с условиями?

#angularjs

Вопрос:

Я пишу приложение angular и хочу отображать результаты клиентов в таблице с использованием ng-repeat. Я могу подключить ng-filter к ng-модели и выполнить поиск результатов, но я хотел бы знать, как я могу добавить флажки, чтобы изменить свои результаты.

Например, скажем, у меня есть эти данные:

 [{
    "name": "Bob Smith",
    "percent": 100,
    "notes": "100 percent complete"
 },
 {
    "name": "Sally Brown",
    "percent": 75,
    "notes": "Not yet at 100 percent"
 }
    ....
 ]

Мое текущее приложение позволяет пользователям искать что-либо здесь, как обычный ng-repeat с фильтром:

 <input ng-model="query.$">
<table>
    <tr>
        <th>Name</th>
        <th>Percent</th>
        <th>Notes</th>
    </tr>
    <tr ng-repeat="customer in customers | filter:query">
        <td>{{ customer.name }}</td>
        <td>{{ customer.percent }}</td>
        <td>{{ customer.notes }}</td>
    </tr>
</table>
<input ng-model="query.completed" type="checkbox"> Show Completed Jobs

Но я бы хотел, чтобы сбоку был флажок с надписью «Показывать клиентам 100%». Я пытался написать функцию фильтра:

 .filter('show100percent', function() {
    return function(items, showcompleted) {
        var jobs = []
        items.forEach(function(item) {
            if (showcompleted == false) {
                if (item.percent < 100) {
                    jobs.push(item)
                }
            } else {
                jobs.push(item)
            }
        })
        return jobs
    }
})

Но это не позволяет моему приложению принимать входные данные из текстового поля

 <tr ng-repeat="customer in customers | show100percent:query.completed">

И добавление моего фильтра поверх обычного фильтра просто показывает пустой набор результатов:

 <tr ng-repeat="customer in customers | show100percent:query.completed | filter:query">

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

Ответ №1:

Вы должны использовать другую $scope переменную для назначения флажка и в пользовательском фильтре, прямо сейчас showcompleted отправляется как неопределенный. Таким образом, фильтрация не происходит

   $scope.showcompleted = false;

  <tr ng-repeat="customer in customers | show100percent:showcompleted | filter:query">

также в флажке,

И я немного изменил ваш фильтр

 app.filter('show100percent', function() {
  return function(items, showcompleted) {
    var jobs = []
    items.forEach(function(item) {
      if (showcompleted == true) {
        if (item.percent == 100) {
          jobs.push(item)
        }

      } else {
        jobs.push(item)
      }
    })
    return jobs
  }
})

ДЕМОНСТРАЦИЯ

1. дополнительный фильтр не требуется, просто используйте собственный фильтр angular с расширенным объектом запроса, с 2 членами: ‘$’ для сопоставления любого значения в ng-repeated JSON и ‘percent’ — для сопоставления только процентного значения в JSON. Смотрите мой ответ и его плунжер

2. @Andriy Я это знаю, решение с вопросом go with OPs

Ответ №2:

добавьте атрибут процента к вашему объекту запроса, чтобы он соответствовал вашей модели, поэтому, когда флажок включен, он должен выглядеть так:

 {
  $: FREE_TEXT,
  percent: 100
}

для достижения этого используйте флажок ng-true-value="100" и пустые ng-false-value директивы:

 <input ng-model="query.$">
<table>
    <tr>
        <th>Name</th>
        <th>Percent</th>
        <th>Notes</th>
    </tr>
    <tr ng-repeat="customer in customers | filter:query">
        <td>{{ customer.name }}</td>
        <td>{{ customer.percent }}</td>
        <td>{{ customer.notes }}</td>
    </tr>
</table>
<input ng-model="query.percent" type="checkbox" ng-true-value="100" ng-false-value> Show Completed Jobs

плунжер: http://plnkr.co/edit/uU6ibIDaS3OcYnZ3TqkR?p=preview