css - Showing content on item clicked in AngularJS -

i have ng-repeat in there pairs of 2 rows. aim show second row after first clicked.

<div class="row myclass"     ng-repeat="sth in sths"     ng-class="{ cssstheven: (($index%2) == 0), csssthodd: ($index%2)}">     <div class="row">         {{sth.name}} {{sth.surname}}     </div>     <div class"row">         {{sth.content}}     </div> </div> 

what have:

what wish have after john smith clicked:

here few interesting angularjs docs work practice example.

using ng-repeat, odd , may use, therefore directives ng-class-odd="'odd'" , ng-class-even="'even'"can used in ng-repeatexpression

take @ https://docs.angularjs.org/api/ng/directive/ngclassodd

for conditionally visibility changes, directive ng-show exists https://docs.angularjs.org/api/ng/directive/ngshow

possible solution

<div class="row myclass"     ng-repeat="sth in sths"     ng-class-even="'cssstheven'" ng-class-odd="'csssthodd'">     <div class="row" ng-click="clicked($index)">         {{sth.name}} {{sth.surname}}     </div>     <div class"row" ng-show="sth.isvisiblie">        {{sth.content}}     </div> </div> 

in controller

$scope.clicked = function(index){     $scope.sths[index].isvisiblie = true; } 

this last function guessed, since did not provide how sths array nor initialized.