Проблема использования текстового поля и переключателей для фильтрации таблицы в ng-reapeat Angularjs - PullRequest
Новая
       30

Проблема использования текстового поля и переключателей для фильтрации таблицы в ng-reapeat Angularjs

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

У меня проблема с фильтрацией таблицы в AngularJS в ng-repeat. Я хотел бы добавить переключатель (на основе столбца таблицы) под текстовым полем поиска для добавления дополнительных фильтров.

В тот момент, когда я вписываю «char» в текстовое поле, система корректно фильтрует таблицу и отображает все результаты. Моя цель: если я выберу переключатель «Персона», должны появиться только результаты с человеком, содержащим «символ». Если я нажимаю «компания», переключатель «Персона» должен быть отключен, и должен отображаться только результат с компанией, содержащей «символ».

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

<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>
    <!-----------------HERE THE RADIO BUTTONS ----------- START --->
    <input type="radio" name="filter" value="PERSON" ng-model="search.PERSON">
    <label for="PERSON">Person</label>

    <input type="radio" name="filter" value="COMPANY" ng-model="search.COMPANY">
    <label for="COMPANY">Company</label>
    <!-----------------HERE THE RADIO BUTTONS ------------- END --->
</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 
        };
    }

});

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

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

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

1 Ответ

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

Вы должны внести следующие изменения:

Отредактируйте ваши переключатели следующим образом: 

 <!-----------------HERE THE RADIO BUTTONS ----------- START --->
    <input type="radio" name="filter" value="PERSON" ng-change ="chosefilter()"
    ng-model=" filterType">
    <label for="PERSON">Person</label>

    <input type="radio" name="filter" value="COMPANY"  ng-change ="chosefilter()"ng-model="filterType">
    <label for="COMPANY">Company</label>
    <!-----------------HERE THE RADIO BUTTONS ------------- END --->

ваш стол следующим образом: 

<tbody ng-repeat="contact in contacts | filter:searcher| orderBy:champTri:triDescendant">

внутри вашего контроллера добавьте это: 

$scope.searchText="";
   $scope.searcher={
   PERSON:"",
   COMPANY:"",
   };
   $scope.filterType="PERSON";
   $scope.chosefilter=function()
   {

   console.log( $scope.filterType);
        if( $scope.filterType=='PERSON')
        {
        $scope.searcher.PERSON=$scope.searchText;$scope.searcher.COMPANY="";
        }
        else if( $scope.filterType=='COMPANY')
        {
        $scope.searcher.COMPANY=$scope.searchText;$scope.searcher.PERSON="";
        }
        console.log($scope.searcher);

    }

что я сделал, переменная $ scope.searcher должна иметь такие же свойства, как свойства содержимого данных, такие как PERSON и COMPANY. затем в фильтре просто напишите имя объекта следующим образом: filter: [ИМЯ ОБЪЕКТА]; я сделал небольшое приложение, чтобы сделать ваш фильтр, поэтому, если есть ошибки, пожалуйста, скажите мне, чтобы исправить это.

...