CODEWITHSUNDEEP
angularjshtml
Nour Nehme
Nour Nehme

Reputation: 21

Check if a row already exists before pushing it to table

I have a html table

<table>
  <tr ng-repeat="row in rowsproductrequests">
    <td>{{row.PRODUCTID}}</td>
    <td>{{row.DESCRIPTION}}</td>
  </tr>
</table>

a second table for search products :

<table>
  <tr ng-repeat="row in searchproductsList">
    <td>{{row.PRODUCTID}}</td>
    <td>{{row.DESCRIPTION}}</td>
  </tr>
</table>

On click I am pushing the item from the search table (Second table) to the main table (first table) : JS:

$scope.addItemAsIng = function(row){
  $scope.rowsproductrequests.push(row);
}

The items are pushed. My problem is how can I check if an item exists in the first table so I can stop pushing the same item twice.

Upvotes: 2

Views: 1195

Answers (4)

Matthew Cawley
Matthew Cawley

Reputation: 2818

An alternative approach

Rather than populate the second table by pushing selected items to a second array, I'd suggest using the same array but send it through a custom filter that identifies which items are selected.

How to do it

1) Create a function in your controller that sets the selected property of a given object to true:

$scope.onAvailableRowClicked = function(row){
  row.selected = true;
}

2) Then wire that up to the first table (of available objects) using the ng-click directive:

<h4>Available</h4>
<table>
  <tr ng-repeat="row in rowsproductrequests"
    ng-click="onAvailableRowClicked(row)"> 
    <td>{{row.PRODUCTID}}</td> 
    <td>{{row.DESCRIPTION}}</td>
  </tr>
</table>

3) Now create a custom filter that identifies all of the objects within a given array that have the selected property set to true:

app.filter("isSelectedFilter", function() {
  return function(input){
    return input.filter(function(obj){
      return (obj.selected === true);
    });
  } 
});

4) Finally, use the filter in the ng-repeat of the second table to identify selected records:

<h4>Selected</h4>
<table>
  <tr ng-repeat="row in rowsproductrequests | isSelectedFilter"> 
    <td>{{row.PRODUCTID}}</td> 
    <td>{{row.DESCRIPTION}}</td>
  </tr>
</table>

Benefits of this approach

  • You only have to maintain one array. Less variables means that your code becomes easier to read, you can see more easily what is driving the view. It's also easier to debug if things go wrong.

  • There's only ever one instance of each object. One source of the truth means that there's no danger of objects falling out of sync ("should I use this or that!?!?"). It also means that it's not physically possible to select an object more than once.

  • You can easily reuse the selected property in other parts of the view. If you wanted to highlight in the available list which objects had been selected, you could do so easily using ng-class for example. (The thought of using array comparison logic here is already giving me a headache!)

Demo

CodePen: A custom filter to identify selected records

Upvotes: 1

Suraj Mangalekar
Suraj Mangalekar

Reputation: 1

Also you can use "indexOf()", it will return array index of your current item, if not exit it will return -1

Like

if($scope.rowsproductrequests.indexOf(row) != -1)

Upvotes: 0

Donal
Donal

Reputation: 32713

Use includes, for example:

$scope.addItemAsIng = function(row){
  if(!$scope.rowsproductrequests.includes(row)) $scope.rowsproductrequests.push(row);
}

Upvotes: 2

LearningDesires
LearningDesires

Reputation: 3

Approach One: One solution will be once you add the row from the second table, remove that item from the collection and add to the first table that,s how you will never get duplicate items. Second Approach: you will have to maintain an identity column in both tables based on these identity columns you need to check before adding whether this item exists.

Upvotes: 0

Related Questions