I have an HTML structure similar to the following:
<div class="main">
<ul>
<li ng-repeat='save in saves'>
<h3>{{save.name}}</h3>
<div >
<ul>
<li ng-repeat='story in stories'>
<div ng-show="story.display"><label>Welcome</label></div>
<div ng-show="!story.display"><input type="text"></div>
</li>
</ul>
</div>
<div ng-click="add()">Click</div>
</li>
</ul>
<div ng-click="theme()">Add theme</div>
</div>
My controller code looks like this:
$scope.saves=[];
$scope.stories=[];
$scope.theme=function()
{
$scope.saves.push({name:'Joseph', name:'John', name:'Peter'});
};
$scope.add=function()
{
$scope.stories.push({display:false});
};
In this scenario, when a user clicks on the "Add theme" button, names are pushed into the saves array and repeated with li tags as follows:
Joseph
Click
John
Click
Peter
Click
However, when a user clicks on the "Click" button, multiple textboxes are displayed for each li tag instead of just one. The challenge is how to display only one specific textbox upon clicking.
Can you help solve this issue?