I'm brand new to AngularJS and I'm attempting to create a row with 3 elements per row in an ng-repeat. When the user clicks on one of the row elements, another row should appear below it based on the ng-show I have set up. I organized each row into different objects and placed the show between the lines. My question is, can I use ng-click in one row to hide the row that may have been clicked in another row?
My idea is to ng-click the selected element and display its information. Anything on the same row is fine because they will all bind to the same ng-show for the row. The issue arises when I click on one element in one row and then click on another element in the second row, both divs show up, but I only want the one I clicked on to show.
Any suggestions? I've tried a lot of things and have made some progress, but haven't achieved the exact user experience I'm aiming for. Thank you, and apologies for being inexperienced. It's great that I can come here for help since no one at my company has experience with Angular.
<div ng-controller="oneCtrl">
<div class="row">
<div ng-repeat="image in images" class="span4 padding-bottom30">
<a href rollover ng-click="select(image)">
<img class="img-responsive padding-top30" ng-src={{image.img}}/>
</a>
</div>
</div>
<div ng-show=selected>
<div class="row">
<div class="span4 padding-top30">
<h3 class="mont margin-top0">{{selected.name}}</h3>
<p><b>Mission Statement</b></p>
<p>{{selected.info}}</p>
<a href={{selected.site}}><button class="btn btn-colour-red pull-left">VISIT SITE</button></a>
</div>
<div class="span8 padding-top30">
<img class="img-responsive" ng-src={{selected.photo}}/>
</div>
</div>
</div>
<div class="row">
<div ng-repeat="pics in images" class="span4 padding-bottom30">
<a href ng-click="select(pics)">
<img class="img-responsive padding-top30" ng-src={{pics.img}}/>
</a>
</div>
</div>
<div ng-show=selected>
<div class="row">
<div class="span4 padding-top30">
<h3 class="mont margin-top0">{{selected.name}}</h3>
<p><b>Mission Statement</b></p>
<p>{{selected.info}}</p>
<a href={{selected.site}}><button class="btn btn-colour-red pull-left">VISIT SITE</button></a>
</div>
<div class="span8 padding-top30">
<img class="img-responsive" ng-src={{selected.photo}}/>
</div>
</div>
</div>
</div>