Angular JS: поиск с параметрами, определенными при выборе

Итак, у меня есть окно поиска с несколькими параметрами, которыми я хочу ограничить свой поиск. В моем примере это включает имя и фамилию.

Чего я пытаюсь достичь

Итак, я пытался реализовать это так. Это код выпадающего списка.

<select id="usersearchby" ng-model="searchFilter" ng-change="selectAction()">
        <option>Search By ...</option>
        <option value="lastName">Last Name</option>
        <option value="firstName">First Name</option>
</select>

Это код поля ввода ввода.

<input type="search" ng-if="searchFilter != 'firstName' && searchFilter != 'lastName'" ng-model="searchText">
<input type="search" ng-if="searchFilter == 'firstName'" ngModel="searchText.first_name">
<input type="search" ng-if="searchFilter == 'lastName'" ngModel="searchText.last_name">

Это код для div, в котором отображаются результаты.

<div class="block_line_item userlist_expanded" ng-repeat="user in users | filter: searchText">

Однако этот код не работает, если у меня есть только одно поле поиска ввода, скажем, first_name (без условных вводов), он работает отлично! Что я делаю не так? Есть ли лучший способ сделать это?

Образец данных json, с которыми я работаю:

[{"role":"1","credentials":"","work_phone":"206–298–3059","last_name":"Doe","middle_name":"","suffix":"","title":"Mr.","mobile_phone":"1–877–932–4259","id":1,"fax":"135–678-6357","first_name":"John","email":"[email protected]","username":"user1"},     {"role":"1","credentials":"","work_phone":"206–298–3059","last_name":"Doe","middle_name":"","suffix":"","title":"Mr.","mobile_phone":"1–877–932–4259","id":2,"fax":"135–678–6357","first_name":"Jane","email":"[email protected]","username":"user2"}]

javascript angularjs angular-ng-if
person geekchic    schedule 08.12.2014    source источник
comment
Не могли бы вы предоставить код вашего контроллера?   -  person Wayne Ellery    schedule 08.12.2014
comment
Очень просто: $http.get("/users").success(function(data) { $scope.users=data; }); Данные пользователей находятся в формате json с парами ключ-значение для first_name и last_name среди прочих.   -  person geekchic    schedule 08.12.2014
comment
Похоже, что-то не так с фильтром: searchText, потому что теперь значение находится в searchText.first_name или searchText.last_name   -  person Wayne Ellery    schedule 08.12.2014
comment
@WayneEllery Думаю, ты прав! Но как мне этого избежать? :/   -  person geekchic    schedule 08.12.2014
comment
У вас есть данные json?   -  person Wayne Ellery    schedule 08.12.2014
comment
@WayneEllery Да, знаю.   -  person geekchic    schedule 08.12.2014
comment
Не могли бы вы добавить это к вопросу?   -  person Wayne Ellery    schedule 08.12.2014
comment
Вы можете попробовать использовать пользовательскую функцию в своем контроллере для фильтрации, такой как функция matchName, здесь: -filter" rel="nofollow noreferrer">sarahbranon.com/post/69604997957/   -  person Wayne Ellery    schedule 08.12.2014
comment
Давайте продолжим обсуждение в чате.   -  person geekchic    schedule 08.12.2014

Ответы (3)


arrow_upward
2
arrow_downward

Вместо трех текстовых полей гораздо лучше иметь одно и использовать функцию фильтра в вашем контроллере, которая будет использоваться фильтром в ng-repeat:

<input type="search" ng-model="searchText"/>

<div class="block_line_item userlist_expanded" ng-repeat="user in users | filter: filterUsers(searchText, searchFilter)">
        {{user.first_name + ' ' + user.last_name}}
</div>

$scope.filterUsers = function(searchText, searchFilter) {
    if (searchFilter === 'firstName') {
      return function (user) { return user.first_name.match(searchText); }
    }
    else if (searchFilter === 'lastName') {
      return function (user) { return user.last_name.match(searchText); }
    }
    else {
      return function (user) { return user.first_name.match(searchText) || user.last_name.match(searchText); }
    }
};

http://plnkr.co/edit/vYlBLiF555JLpwlnZIPR?p=preview

person Wayne Ellery    schedule 08.12.2014
comment
Это в значительной степени именно то, что я в конечном итоге сделал, кроме одной вещи. Доступ к searchFilter можно получить из области действия, т.е. $scope.searchFilter, поэтому вам не нужно передавать его в качестве аргумента. Спасибо за помощь! - person geekchic; 08.12.2014

arrow_upward
2
arrow_downward

Вам не нужно добавлять 3 текстовых поля. Это можно сделать, если вы поместите выражение просмотра в модель обоих элементов управления (поиск и выбор). Все, что нужно сделать, это отфильтровать на основе переменной, которой вы бы динамически присваивали значения (внутри выражений наблюдения). Например, если вы хотите искать на основе first_Name, мы устанавливаем myModel.first_Name = searchText и аналогично для last_Name. В случае, если в выпадающем списке ничего не выбрано, мы устанавливаем myModel = searchText

HTML

     <select id="usersearchby" ng-model="searchFilter">
        <option>Search By ...</option>
        <option value="last_Name">Last Name</option>
        <option value="first_Name">First Name</option>
    </select>
    <input type="search" ng-Model="searchText">
    <br>

    <div>
    <br>
        All Data :- <br>
            {{ jsonStore }}
    </div>
    <br>

    Result:-
    <div ng-repeat="user in jsonStore | filter:filterModel">
        {{user}}
    </div>

JS

$scope.$watch('searchFilter', function(newValue) {
 var myModel={
        first_Name: "",
        last_Name: "",
      };
 if(angular.equals(newValue,'first_Name'))
   {
      myModel.first_Name=$scope.searchText;
   }
 else if(angular.equals(newValue,'last_Name'))
    {
      myModel.last_Name=$scope.searchText;
    }
    else
    {
     myModel=$scope.searchText;
    }
    $scope.filterModel=myModel;
   });

То же самое нужно сделать для «searchText».

Обратитесь к этому plnkr за полным кодом и его тестовым запуском: - http://plnkr.co/edit/q9Co9stjzXI62UlWczU3?p=preview

person Aman Dhanjal    schedule 08.12.2014

arrow_upward
1
arrow_downward

Я думаю, может быть, вы делаете этот трудный путь с более чем одним поисковым текстом для обработки. Но я просто поставил plunkr, чтобы продемонстрировать способ сделать это, но моя идея может выйти из-под контроля, если количество параметров выйдет за пределы пропускной способности.

В основном, что я делаю, это устанавливаю состояния, к которым нужно применять фильтры.

При изменении текста запроса необходимо применить фильтры, усугубляющие условия с помощью условия И.

Базовая установка флажков идет ниже

  $scope.shouldSearchWithFName = false;
  $scope.shouldSearchWithLName = false;
  $scope.searchText = "";

Plunkr http://plnkr.co/edit/nFV9s4XDrXGcmUYUPm8n?p=preview

person Deeptechtons    schedule 08.12.2014