select nth element from element array jquery - angularjs

Question

I'm working on my angular e2e test project. I've the following html generated as part of my ng-repeat with out any id, I would like to choose the second element that is with heading Topic - xyz and also then click the button which is a child of it's sibling. How can I do that.
<div class="row ng-scope" ng-repeat="post in posts">
<div class="col-md-7">
<h4 class="ng-binding">Topic - ABC</h4>
<div class="text-right">
<button class="btn btn-none btn-sm" ng-click="posts.newPost()">
Create Post
</button>
</div>
</div>
</div>
<div class="row ng-scope" ng-repeat="post in posts">
<div class="col-md-7">
<h4 class="ng-binding">Topic - XYZ</h4>
<div class="text-right">
<button class="btn btn-none btn-sm" ng-click="posts.newPost()">
Create Post
</button>
</div>
</div>
</div>
<div class="row ng-scope" ng-repeat="post in posts">
<div class="col-md-7">
<h4 class="ng-binding">Topic - EFG</h4>
<div class="text-right">
<button class="btn btn-none btn-sm" ng-click="posts.newPost()">
Create Post
</button>
</div>
</div>
</div>
This is what I've tried to so far which is not working
var button = $$(by.repeater('post in posts')).get(1).$(by.css('[ng-click="posts.newPost()"]'))
button.click(); // click is not showing up

Answer 1

$$(by.repeater('post in posts')) and $(by.css('[ng-click="posts.newPost()"]')) - these are not correct syntax of using the by.repeater() or by.css() locator. $$ is a shortcut for the element.all(by.css()) and should not be used for the "repeater" locator. If you use $(), there is no need to wrap your selector into by.css():
var button = element.all(by.repeater('post in posts')).get(1).$('[ng-click*=newPost]');
button.click();
If you want to filter the repeater element by the topic name, you can use .filter():
var button = element.all(by.repeater('post in posts')).filter(function (post) {
return post.$("h4").getText().then(function (postTitle) {
return postTitle === "Topic - XYZ";
});
}).get(1).$('[ng-click*=newPost]');
button.click();
Also see if using the by.buttonText locator would work as well (a little bit cleaner):
var post = element.all(by.repeater('post in posts')).get(1);
var button = post.element(by.buttonText("Create Post"));
button.click();