несколько фильтров в AngularJS с текстом и переключателями - PullRequest
Новая
       29

несколько фильтров в AngularJS с текстом и переключателями

0 голосов
/ 16 января 2019

Я делаю модуль поиска на столе. Поиск (текстовое поле) на столе работает. В заголовке столбца таблицы одинаково сортировки.

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

Вот мой взгляд: 

<div class="spacer input-group">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-search"></span>
    </div>
    <input type="text" ng-model="searchText" class="form-control" placeholder="Search name..." ng-change="search(searchText)"/>
    <div class="input-group-btn">
        <button class="btn btn-default" ng-click="razRecherche()">
            <span class="glyphicon glyphicon-remove"></span>
        </button>
    </div>
</div>

<div>
    <div>HERE THE RADIO BUTTONS</div>
</div>


<div class="table-responsive" id="allContacts">
    <table ng-show="contacts.length" class="table table-striped table-hover spacer">
        <thead>
            <tr>
                <th class="colPerson">
                    <a href="" ng-click="personsSort('PERSON')">Person</a>
                    <span class="hSpacer" ng-class="cssChevronsTri('PERSON')"></span>
                </th>
                <th class="colCompany">
                    <a href="" ng-click="personsSort('COMPANY')">Company</a>
                    <span class="hSpacer" ng-class="cssChevronsTri('COMPANY')"></span>
                </th>
                <th class="colDescription">
                    <a href="" ng-click="personsSort('REQUESTDESCRIPTION')">Description</a>
                    <span class="hSpacer" ng-class="cssChevronsTri('REQUESTDESCRIPTION')"></span>
                </th>
            </tr>
        </thead>       


        <tbody ng-repeat="contact in contacts | filter:searchText | orderBy:champTri:triDescendant">
            <tr class="clickable">
                <td class="colPerson" ng-click="selContact(contact,contact.ID)" ng-class="{sel:selIdx==$index}"><a href="#/view-contacts/{{contact.ID}}">{{contact.PERSON}}</a></td>
                <td class="colCompany" ng-click="selContact(contact,contact.ID)">{{contact.COMPANY}}</td>
                <td class="colDescription" ng-click="selContact(contact,contact.ID)">{{contact.REQUESTDESCRIPTION}}</td>        
            </tr>
        </tbody>    
    </table>
</div>

Мой контроллер 

app.controller('ctrlContacts', function ($scope, $timeout, ContactService){

    $scope.search = function(searchText) {
        $scope.reloadPreviousSearch = false;

        if (!searchText.length) {
            //alert("searchText empty");
        }
        if (searchText.length>2) {

            $timeout(function () {
                // RETRIEVE DATA FROM JSON OBJECT OF THE SERVER SEVICE AND A DB QUERY - OK
                ContactService.fastSearch(searchText).success(function(contacts){
                    console.log("query fastSearch OK");                             
                    var length = contacts.length;
                    $scope.loading = false;

                    if (length == 0) {
                        $scope.searchButtonText = "No result";          
                    }else {
                        $scope.searchButtonText = length + " results found";        
                    }
                    // For the orderby date
                    for (var i=0; i<length; i++) {
                        if(contacts[i].REQUESTTRUEDATE!=""){
                            contacts[i].REQUESTTRUEDATE = new Date(contacts[i].REQUESTTRUEDATE.replace(/-/g,"/"));
                        }else{
                            contacts[i].REQUESTTRUEDATE=null;
                        }
                    }           

                    $scope.contacts = contacts; 
                    $scope.champTri='PERSON';

                    $scope.selIdx= -1;

                    $scope.selContact=function(contact,idx){
                        $scope.selectedContact=contact;
                        $scope.selIdx=idx;
                        window.location="#/view-contacts/" + idx;
                    }

                    $scope.isSelContact=function(contact){
                        return $scope.selectedContact===contact;
                    }           

                });                                         
            }, 1000);               
        }else{
            $scope.contacts=null;
        }   
    }


    // SEARCH

    $scope.searchText = null;
    $scope.razRecherche = function() {
        $scope.searchText = null;
        $scope.contacts=null;
    }   

    // SORT

    $scope.champTri = null;
    $scope.triDescendant = false;
    $scope.personsSort = function(champ) {
        if ($scope.champTri == champ) {
            $scope.triDescendant = !$scope.triDescendant;
        } else {
            $scope.champTri = champ;
            $scope.triDescendant = false;
        }   
    }

    $scope.cssChevronsTri = function(champ) {
        return {
            glyphicon: $scope.champTri == champ,
            'glyphicon-chevron-up' : $scope.champTri == champ && !$scope.triDescendant,
            'glyphicon-chevron-down' : $scope.champTri == champ && $scope.triDescendant 
        };
    }

});

Я пытаюсь добавить переключатели для фильтрации таблицы по тексту, введенному в текстовое поле. Но мой фильтр не работает.

Не могли бы вы помочь мне добавить фильтры в текстовое поле (searchText) с помощью переключателя?

Заранее благодарю за помощь.

1 Ответ

0 голосов
/ 16 января 2019

если я правильно вас понял, вы хотите создать множественный фильтр с помощью переключателей

свойство фильтра хочет, чтобы объект был параметром

например, вы можете сделать так: 

ng-repeat="contact in contacts | filter:{firstnameProperty:firstnameParamenter, ageProperty:ageParameter}

где firstnameProperty - это свойство объекта массива, а firstnameParameter - переменная, например $ scope.firstnameParameter. и вы можете привязать к входу.

вместо 

ng-repeat="contact in contacts | filter:searchText
...