Use ng-click to show the right article using ng-show and ng-repeat

Question

The following happens in the same controller.

I have a page that shows a list of article titles. If the user clicks on an article title a popup will show the article in detail.

The article titles are generated by a ng-repeat.

<div class="adItem" ng-click="showArticle = tiki._id" ng-repeat="tiki in tikis track by tiki._id">

The article details are also generated by a ng-repeat:

<article class="adArticle" ng-show="showArticle === tiki._id" ng-repeat="tiki in tikis track by tiki._id">

Notice i'm using ng-click and ng-show with the variable 'showArticle' to toggle the visibility of the article detail. If showArticle === the id of the article title, show the article detail.

However, this doesn't work, what am i doing wrong?

thx,

Kevin,

Answer 1

Ng-repeat creates scope for each repeated element, say:

contoller-scope
child scope1
child scope2

showArticle = tiki._id sets child scope's variable, not controller-scope's. Thats why u cant address it.

You should put it into function: ng-click="setSelected(tiki)"

$scope.setSelected = function(tiki) {
  $scope.showArticle = tiki._id;
}

Then this will work.

Or you can ng-click="$parent.showArticle = tiki._id". (This is bad style, but will still work)

However, this is bad way -- you dont need second repeat, just use object, not id:

$scope.setSelected = function(tiki) {
  $scope.showArticle = tiki;
}

and add it to output.