如何使用兩個標準進行搜索（選擇和輸入）

Question

我是新的角js，我試圖在我的表中使用selectbox進行搜索。 我希望我的搜索將基於兩個xriterion :(我將寫在輸入項上，以及我將選擇什麼） 例如，如果我將選擇（按名稱搜索），我應該根據名稱搜索： 這裏是我的代碼：

<div ng-controller="mycontrolleur"> 
<input type='text' ng-model="searchT"> 
    <select ng-model="choix"> 
    <option value='nom'>search by name</option> 
    <option value='cin'>search by CIN</option>   

    </select> 
     <table border="1"> 
<tr><td>Nom</td><td>CIN</td></tr> 
<tr ng-repeat="x in students|filter:searchT|orderBy:choix"> 
<td>{{x.nom}} </td><td>{{x.cin}}</td></tr> 

</table> 

</div> 

<script src='angular.min.js'></script> 
<script> 
var app=angular.module('searchApp',[]); 
    app.controller('mycontrolleur',function($scope) 
    { 
     $scope.students=[{nom:'marwen',cin:11155}, 
        {nom:'mounir',cin:15885}, 
        {nom:'maryem',cin:25155}, 
        {nom:'ahmed',cin:77555}, 
        {nom:'amel',cin:88155} 
        ];   
        }); 

</script> 

感謝您的幫助球員:)

Answer 1

您可以使用像這樣的過濾器：

app.filter('filterByCustomProp', function($filter) { 
    return function(source, prop, searchValue) { 
     if (!searchValue) return source; 
     if (!prop) return $filter('filter')(source, searchValue); //search on name & CIN 
     return source.filter(function(item) { 
     return (item[prop].toString().indexOf(searchValue) > -1); 
     }); 
    }; 
    }); 

然後，您可以撥打：

<tr ng-repeat="x in students|filterByCustomProp:choix:searchT|orderBy:choix"> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="searchApp" ng-controller="mycontrolleur"> 
 
    <input type='text' ng-model="searchT"> 
 
    <select ng-model="choix"> 
 
    <option value='nom'>search by name</option> 
 
    <option value='cin'>search by CIN</option> 
 

 
    </select> 
 
    <table border="1"> 
 
    <tr> 
 
     <td>Nom</td> 
 
     <td>CIN</td> 
 
    </tr> 
 
    <tr ng-repeat="x in students|filterByCustomProp:choix:searchT|orderBy:choix"> 
 
     <td>{{x.nom}}</td> 
 
     <td>{{x.cin}}</td> 
 
    </tr> 
 

 
    </table> 
 

 
</div> 
 

 

 
<script> 
 
    var app = angular.module('searchApp', []); 
 
    
 
    app.filter('filterByCustomProp', function($filter) { 
 
    return function(source, prop, searchValue) { 
 
     if (!searchValue) return source; 
 
     if (!prop) return $filter('filter')(source, searchValue); //search on name & CIN 
 
     return source.filter(function(item) { 
 
     return (item[prop].toString().indexOf(searchValue) > -1); 
 
     }); 
 
    }; 
 
    }); 
 
    
 
    app.controller('mycontrolleur', function($scope) { 
 
    $scope.students = [{ 
 
     nom: 'marwen', 
 
     cin: 11155 
 
    }, { 
 
     nom: 'mounir', 
 
     cin: 15885 
 
    }, { 
 
     nom: 'maryem', 
 
     cin: 25155 
 
    }, { 
 
     nom: 'ahmed', 
 
     cin: 77555 
 
    }, { 
 
     nom: 'amel', 
 
     cin: 88155 
 
    }]; 
 
    }); 
 
</script>

Answer 2

你好，你可以通過對象中使用的過濾器。例如： ng-repeat="client in clients | filter: {name: 'Brett', designation: '1'}"