Problem for using a textbox and radio buttons in order to filter a table in ng-reapeat Angularjs

[amadese]

I have a problem for filtering a table in AngularJS into ng-repeat.
I would like to add radio button (based on table column) under a search text field for adding more filters.

For the moment when I enter "char" in the text field, the system filters correctly the table and displays all results.
My goal: if I select the radio button "Person", only the results with the person containing "char" should appear. If I click on "company", the radio button "Person" should be unselected and only result with the company containing "char" should appear.

Here my view:

    <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>

My controller:

 

   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
            };
        }
   
    });

I'm trying to add the radio buttons for filtering the table from the text entered in the text field. But I don't know how to use them for filtering the table into the ng-repeat.

Could you please help me to add the filters on the text field (searchText) with the radio buttons?

Thank you in advance for your help.

[Sander Elias]

Hi Amadese,

        <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>

Question, why are you using different vars for your ng-model here?

Regards

Sander