CODEWITHSUNDEEP
angular
Bhrungarajni
Bhrungarajni

Reputation: 2535

How to filter the data from particular search box, instead of filtering the whole set of data using angular

i have a set of data with each having separate search box, now if i input in one search box, it is taking to all search boxes. So i need to filter data on particular search box.

HTML:

<div *ngFor="let item of data">
    <p>{{item.level_name}}</p>
    <input matInput type="text" id="" name="item" value="" placeholder="Search" (input)="searchValue($event)">
    <div *ngFor="let item2 of item.values | search:'id,name':query">
        <p>{{item2.name}}</p>
    </div>
</div>

DEmo: Demo

Upvotes: 1

Views: 113

Answers (2)

Abdul Aleem
Abdul Aleem

Reputation: 361

<div *ngFor="let item of data">
<p>{{item.level_name}}</p>
<input matInput type="text" id="" name="item" value="" placeholder="Search" [(ngModel)]="item.query">
<div *ngFor="let item2 of item.values | search:'id,name':item.query">
    <p>{{item2.name}}</p>
</div>

You need to update your code here. and following model

{
  "level_id": 10,
  "query":"",
  "values": [...]}

Upvotes: 1

Nick Henry
Nick Henry

Reputation: 58

The problem appears to be that your [(ngModel)] is set to the same variable, query, for each of the text boxes. Since that same variable is bound for each of the text boxes when you change one, you change them all. you need to create an array of query variables the same size as your data array or append a query variable to each object in your data array so each element can have an individual query.

In your demo you have data that looks like this

data = [ { "level_id": 7, "values": [ { "customer_logo": "R", "isAssigned": 1, "id": 40, "name": "Site-43" }, { "customer_logo": "R", "isAssigned": 1, "id": 41, "name": "Site-83" }, { "customer_logo": "R", "isAssigned": 1, "id": 42, "name": "Site-84" } ], "level_name": "Site" }, { "level_id": 8, "values": [ { "customer_logo": "R", "isAssigned": 0, "id": 43, "name": "Technology_1" }, { "customer_logo": "R", "isAssigned": 0, "id": 44, "name": "Technology_2" }, { "customer_logo": "R", "isAssigned": 0, "id": 45, "name": "Technology_3" } ], "level_name": "Technology" }, { "level_id": 9, "values": [ { "customer_logo": "R", "isAssigned": 1, "id": 46, "name": "SemiFinished" } ], "level_name": "Valuation Class" }, { "level_id": 10, "values": [ { "customer_logo": "R", "isAssigned": 0, "id": 47, "name": "MN-1657106" }, { "customer_logo": "R", "isAssigned": 0, "id": 48, "name": "MN-1149527" }, { "customer_logo": "R", "isAssigned": 0, "id": 49, "name": "MN-1782715" }, { "customer_logo": "R", "isAssigned": 0, "id": 50, "name": "MN-622060" }, { "customer_logo": "R", "isAssigned": 0, "id": 51, "name": "MN-1111461" } ], "level_name": "Product" }, { "level_id": 11, "values": [ { "customer_logo": "R", "isAssigned": 0, "id": 52, "name": "LINE-130_83" }, { "customer_logo": "R", "isAssigned": 0, "id": 53, "name": "LINE-301_83" }, { "customer_logo": "R", "isAssigned": 0, "id": 54, "name": "LINE-370_43" }, { "customer_logo": "R", "isAssigned": 0, "id": 55, "name": "LINE-245_84" } ], "level_name": "Line" }, { "level_id": 12, "values": [ { "customer_logo": "R", "isAssigned": 0, "id": 56, "name": "Resource-617" }, { "customer_logo": "R", "isAssigned": 0, "id": 57, "name": "Resource-369" }, { "customer_logo": "R", "isAssigned": 0, "id": 58, "name": "Resource-204" }, { "customer_logo": "R", "isAssigned": 0, "id": 59, "name": "Resource-207" }, { "customer_logo": "R", "isAssigned": 0, "id": 60, "name": "Resource-370" }, { "customer_logo": "R", "isAssigned": 0, "id": 61, "name": "Resource -500" } ] } ]

if you add a query to each of those objects like this

data = [ { "level_id": 7, "query": '', "values": [ { "customer_logo": "R", "isAssigned": 1, "id": 40, "name": "Site-43" },... ]

and now change your [(ngModel)] form query to item.query and your ngFor underneath that to use item.query instead of query you should be able to get individual query strings.

Upvotes: 0

Related Questions