Clicking an element inside repeater when another element equals specific input with protractor and jasmine

Question

My HTML structure is this:

<li ng-repeat="m in members">
  <div class="col-name">{{m.name}}</div>
  <div class="col-trash">
    <div class="trash-button"></div>
  </div>
</li>

What I want to be able to do is using protractor, click on the trash when m.name equals a specific value.

I've tried things like:

element.all(by.repeater('m in members')).count().then(function (number) {
  for (var i = 0 ; i < number ; i++) {
    var result = element.all(by.repeater('m in members').row(i));
    result.get(0).element(by.binding('m.name')).getAttribute('value').then(function (name) {
        if (name == 'John') {
            result.get(0).element(by.className('trash-button')).click();
        };
      });
    };
  });

This seems like it should work, however, it seems like my function does not even run this.

I've also looked into promises and filters though have not been successful with those either. Keep getting errors.

var array = element.all(by.repeater('m in members'));
array.filter(function (guy) {
  guy.getText().then(function (text) {
    return text == 'John';
  })
}).then(function (selected) {
  selected.element(by.className('trash-button')).click()
}

All I would like to do is click on the corresponding trash when looking for a specific member list!

Any help would be much appreciated.

EDIT: suggested I use xpath once I find the correct element, which is fine, the problem is I cannot get the filter function's promise to let me use element(by.xpath...)

If I try:

var array = element.all(by.repeater('m in members'));
array.filter(function (guy) {
  guy.getText().then(function (text) {
    return text == 'John';
  })
}).then(function (selected) {
  selected.element(by.xpath('following-sibling::div/div')).click()
}

I get the error:

Failed: Object has no method 'element'

Figured it out. Following the Protractor filter guideline in the API reference and using alecxe's xpath recommendation, this code will click on any element you find after filtering it.

element.all(by.className('col-name')).filter(function (member, index) {
  return member.getText().then(function (text) {
    return member === 'John';
  });
}).then( function (elements) {
  elements[0].element(by.xpath('following-sibling::div/div/')).click();
});

You can change the xpath to select different stuff incase your HTML does not look like mine.

Answer 1

It looks like you can avoid searching by repeater, and use by.binding directly. Once you found the value you are interested in, get the following sibling and click it:

element.all(by.binding('m.name')).then(function(elements) {
    elements.filter(function(guy) {
        guy.getText().then(function (text) {
            return text == 'John';
        })
    }).then(function (m) {
        m.element(by.xpath('following-sibling::div/div')).click();
    });
});

Or, a pure xpath approach could be:

 element(by.xpath('//li/div[@class="col-name" and .="John"]/following-sibling::div/div')).click();