AngularJS中的多个过滤器，带有文本和单选按钮

Question

我正在表上做一个搜索模块。表上的搜索（文本字段）正在工作。表的列标题也有相同的排序。

我想在搜索

文本字段下添加单选按钮以改进我的搜索（添加过滤器）。因此，搜索将基于为所选字段输入的文本。

以下是我的观点：

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

我正在尝试添加单选按钮，用于从文本字段中输入的文本中过滤表格。但是我的过滤器不起作用。

您能否帮助我使用单选按钮在文本字段（搜索文本）上添加过滤器？

提前感谢您的帮助。

Answer 1

如果我理解正确，您希望通过单选按钮创建多个过滤器

filter 属性需要一个对象作为参数

例如，您可以通过以下方式制作：

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

其中 firstname属性

是数组对象的属性，firstnameParameter 是一个变量，例如 $scope.firstnameParameter并且可以绑定到输入。

而不是

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