Question

我是角度js的新手，我正在尝试使用选择框在我的桌子中搜索。我希望我的搜索将基于两个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">

＆＃13;

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

＆＃13;

Answer 2

您好，您可以按对象使用过滤器。例如： ng-repeat="client in clients | filter: {name: 'Brett', designation: '1'}"

如何使用两个标准进行搜索（选择和输入）

2 个答案: