Search code examples
angularjsangular-filters

Filter with keyword search

I'm trying to create a filtering system with angular.js, so far with the help of a few kind people on here,I've ended up with this:

  1. filter with type :it work
  2. filter with salary :it work

now i try to filter results with keyword, My Program: plunker

Can you help me with function of searchText ?? 

<body data-ng-controller="TestController">
  <br/>
  <h4> Filters</h4>
  <strong>type de contrat:</strong>
  <br>
  <input type="checkbox" data-ng-model='type1' data-ng-true-value='contractuel' data-ng-false-value='' /> contractuel

  <input type="checkbox" data-ng-model='type2' data-ng-true-value='mixte' data-ng-false-value='' /> mixte

  <input type="checkbox" data-ng-model='type3' data-ng-true-value='freelance' data-ng-false-value='' /> freelance
  <br>
  <strong>salary :</strong>
  <br>
  <input type="checkbox" data-ng-model='salary1' data-ng-true-value='1000' data-ng-false-value='' />
  < 1000 <input type="checkbox" data-ng-model='salary2' data-ng-true-value='2000' data-ng-false-value='' /> between 1000 and 2000

  <input type="checkbox" data-ng-model='salary3' data-ng-true-value='3000' data-ng-false-value='' /> between 2000 and 3000

  <input type="checkbox" data-ng-model='salary4' data-ng-true-value='4000' data-ng-false-value='' /> >3000
<br>
search:<input type=text placeholder="keyword" ng-model="searchText">
  <table id="missions" border="5">
    <tr>
      <th>
        <div align="center">mission title</div>
      </th>
      <th>
        <div align="center">mission salary</div>
      </th>
      <th>
        <div align="center">mission domaine name</div>
      </th>
      <th>
        <div align="center">mission Nature</div>
      </th>
    </tr>
    <tr data-ng-repeat="mission in missions | filter:nature  | filter:salary | filter:searchText ">
      <td height="28">{{mission.title}}</td>
      <td>{{mission.salary}}</td>
      <td>{{mission.domain.name}}</td>
      <td>{{mission.missionNature.nature}}</td>
    </tr>
  </table>

</body>
Solution

  • The problem is that your filter text is apply for all object. It' means that when you filter "portu" for example, it will return all translator because in your description of them, you have the word opportunity. To avoid this, you don't need much. You have to specify on which fild you wanna search.

    search:<input type=text placeholder="keyword" ng-model="searchText.title">

    Here I just put title on your model. Because of this, when he will apply the filter, he will find the match only in your title. So if you try again with "portu", there is only 3 matches. All 3 have this word in title.

    Working Plunkr