protractor click specific element in repeater by binding

Question

I know that question was asked in the past in some different forms, but still didn't find the exact answer.

I need to find an element inside a repeater and click it. the repeater is a list of apps and I need to find specific app with attribute 'displayName' that equals to specific variable ("appName1" for example).

This is the repeater:

<div class="col-md-3 ng-scope" ng-repeat="app in userApps"> <a data-ui-sref="myAppById({appId:app.id})" class="square_container" href="/developers/myApps/ab7d4369-a2da-4bc5-92a5-a19a1af2db1d"> <strong class="app-display-name ng-binding">appName</strong>... 

this is just a part.

I need to find app in userApps that it's displayName equals "appName1" for example and click it.

Answer 1

There are multiple ways to locate the desired element, though I would chain element.all() and element() and use by.xpath() locator strategy:

var a = element.all(by.repeater("app in userApps")).element(by.xpath(".//a[strong = 'appName1']"));
a.click();

Or, using filter():

element.all(by.repeater("app in userApps")).filter(function (elm) {
    return elm.evaluate("app.displayName").then(function (displayName) {
        return displayName === "appName1";
    });
}).then(function (elms) {
    var link = elms[0].element(by.tagName("a"));
    link.click();
});