CODEWITHSUNDEEP
angularjsfilterangularjs-ng-repeat
Hybrid_
Hybrid_

Reputation: 1

ng-repeat search filter while using the input to add the data to db as well

I have been trying to add a filter to my code to filter for each input that is on the top of my page, however, the filter is actually filtering for every property.

For example: If I search for a user in the user input field, the filter will actually filter the phone, role and status. I want to filter only the user if it is the user field or role if the text input is in role field.

I'm also using the same fields to add a user, so if the inputs are filled in and you click add, the data is added to the db which works but I'm having issues with the filter. I have searched and tried multiple things, however, it does not seem to work. If someone can point me to the right direction, I would appreciate it.

        <tr>
      <td><input class="form-control input-sm" ng-model="user.name" style="height:22px"></td>
      <td><input class="form-control input-sm" ng-model="user.phone" style="height:22px"></td>
      <td><input class="form-control input-sm" ng-model="user.role" style="height:22px"></td>
      <td><input class="form-control input-sm" ng-model="user.status" style="height:22px"></td>
      <td><button class="btn btn-primary btn-xs" ng-click="adduser(); showAlert($event)">Add</button></td>
      <td><button class="btn btn-info btn-xs" ng-click="update()">Update</button></td>
      <td><button class="btn btn-info btn-xs" ng-click="deselect()">Clear</button></td>
    </tr>

    <tr ng-repeat="user in userdb | filter:user.name | filter:user.phone | filter:user.role | filter:user.status">
      <td>{{user.name}}</td>
      <td>{{user.phone}}</td>
      <td>{{user.role}}</td>
      <td>{{user.status}}</td>
      <td><button class="btn btn-warning btn-xs" ng-click="edit(user._id)">Edit</button></td>
      <td><button class="btn btn-danger btn-xs" ng-click="remove(user._id)" disabled>Remove</button></td>
    </tr>

Upvotes: 0

Views: 26

Answers (1)

darkknight
darkknight

Reputation: 216

You can try the following: 

  <table>
  <tr>
  <td><input class="form-control input-sm" ng-model="user.name" style="height:22px"></td>
  <td><input class="form-control input-sm" ng-model="user.phone" style="height:22px"></td>
  <td><input class="form-control input-sm" ng-model="user.role" style="height:22px"></td>
  <td><input class="form-control input-sm" ng-model="user.status" style="height:22px"></td>
  <td><button class="btn btn-primary btn-xs" ng-click="adduser(); showAlert($event)">Add</button></td>
  <td><button class="btn btn-info btn-xs" ng-click="update()">Update</button></td>
  <td><button class="btn btn-info btn-xs" ng-click="deselect()">Clear</button></td>
</tr>

<tr ng-repeat="user in userdb | filter:{name: user.name, phone: user.phone, role: user.role, status: user.status}">
  <td>{{user.name}}</td>
  <td>{{user.phone}}</td>
  <td>{{user.role}}</td>
  <td>{{user.status}}</td>
  <td><button class="btn btn-warning btn-xs" ng-click="edit(user._id)">Edit</button></td>
  <td><button class="btn btn-danger btn-xs" ng-click="remove(user._id)" disabled>Remove</button></td>
</tr>
</table>

Upvotes: 1

Related Questions