How to locate and click an ng-click button in a repeater

Question

I need to test an AngularJS web page using Selenium WebDriver and Protractor.

HTML snippet to be tested:

<tr ng-repeat="item in items" class="ng-scope">
    <td class="ng-binding">
        Item1
    </td>
    <td class="ng-binding">
        description
    </td>
    <td class="ng-binding">
        1234
    </td>
    <td>
        <div ng-click="AddItem(item.id)" class="btn">Add Item</div>
    </td>
</tr>

<tr ng-repeat="item in items" class="ng-scope">
    <td class="ng-binding">
        Item2
    </td>
    <td class="ng-binding">
        description
    </td>
    <td class="ng-binding">
        1235
    </td>
    <td>
        <div ng-click="AddItem(item.id)" class="btn">Add Item</div>
    </td>
</tr>

it looks like this:

screenshot of the html angular page

I already went through the documentation, tutorials on youtube and googled it but I still don't understand how to locate and click "Add Item" for a specific item with a specific item id.

can you please explain to me how it's done?

Answer 1

The specific id you are looking for wont be in the DOM, which means you cannot locate an element using that approach.

The following is the code which i personally use:

element.all(by.repeater('item in items')).filter(function(row){
 return row.all(by.tagName('td')).first().getText().then(function(val){
     return val === "Item1" //this can be your per your wish
  })
}).first().$('[ng-click="AddItem(item.id)"]').click();