I have created a repeater that displays a headline and description for each item. I implemented a checkbox to hide all descriptions at once, which worked perfectly. However, I also wanted to allow users to hide or show each description individually. I almost have it working, but there's one issue: if I hide all descriptions with the checkbox and then try to show one by clicking on it, nothing happens until I click it a second time.
Is there a workaround for this problem?
Below is the code I am using:
<div id="container" ng-app="" ng-controller="myController">
<input type="checkbox" ng-model="MinAllDescriptions" /> <span>Minimize all descriptions</span><br /><br />
<div class="itemContainer" ng-repeat="item in ItemList">
<span class="itemHeadline">{{item.Headline}}</span>
<a href="#" ng-click="MinThisDescription = !MinThisDescription">Hide / Show</a>
<div class="itemDescription" ng-hide="MinAllDescriptions || MinThisDescription" ng-show="!MinAllDescriptions || !MinThisDescription">{{item.Description}}</div>
</div>
</div>
<script>
function myController($scope) {
$scope.MinAllDescriptions = false;
$scope.ItemList = [
{Headline: "Item one", Description: "This is item one"},
{Headline: "Item two", Description: "This is item two"},
{Headline: "Item three", Description: "This is item three"},
{Headline: "Item four", Description: "This is item four"},
{Headline: "Item five", Description: "This is item five"}
];
}
</script>
You can view the interactive version on jsfiddle here: http://jsfiddle.net/195k2e9n/1/