CODEWITHSUNDEEP
javascriptangularjs
noodle
noodle

Reputation: 5

Angular JS hide / show both per item and for all items

I have a repeater with a headline and a description for each item. I want to be able to hide all descriptions at once with the help of a checkbox. This was easily done. Then i want to be able to hide or show each of the descriptions separately too. And i have almost got it working, except for one problem: if i hide all descriptions with the checkbox, and then click on one description to show it nothing happens until i click it a second time.

Is there any way around it?

Here is my code: 

<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>

Check out jsfiddle here: http://jsfiddle.net/195k2e9n/1/

Upvotes: 0

Views: 92

Answers (2)

Lionel Nguyen
Lionel Nguyen

Reputation: 25

Add an event into checkbox and set $scope.MinAllDescriptions = !$scope.MinAllDescriptions

Upvotes: 0

Yasser Shaikh
Yasser Shaikh

Reputation: 47784

Try this - http://jsfiddle.net/7Lbgjvz7/

Html

<div id="container" ng-app="" ng-controller="myController">
    <input type="checkbox" ng-click="minimizeAll()" 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="item.MinThisDescription = !item.MinThisDescription">Hide / Show</a>
        <div class="itemDescription" ng-hide="item.MinThisDescription">{{item.Description}}</div>            
    </div>
</div>

Angular

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"}
    ];

    $scope.minimizeAll = function(){
        angular.forEach($scope.ItemList, function(item, i){
            item.MinThisDescription = !$scope.MinAllDescriptions;
        });
    }
}

Upvotes: 2

Related Questions