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

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

i have repeater headline , description each item. want able hide descriptions @ 1 time help of checkbox. done. want able hide or show each of descriptions separately too. , have got working, except 1 problem: if hide descriptions checkbox, , click on 1 description show nil happens until click sec time.

is there way around it?

here code:

<div id="container" ng-app="" ng-controller="mycontroller"> <input type="checkbox" ng-model="minalldescriptions" /> <span>minimize 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 item one"}, {headline: "item two", description: "this item two"}, {headline: "item three", description: "this item three"}, {headline: "item four", description: "this item four"}, {headline: "item five", description: "this item five"} ]; } </script>

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

try - http://jsfiddle.net/7lbgjvz7/

html

<div id="container" ng-app="" ng-controller="mycontroller"> <input type="checkbox" ng-click="minimizeall()" ng-model="minalldescriptions" /> <span>minimize 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 item one"}, {headline: "item two", description: "this item two"}, {headline: "item three", description: "this item three"}, {headline: "item four", description: "this item four"}, {headline: "item five", description: "this item five"} ]; $scope.minimizeall = function(){ angular.foreach($scope.itemlist, function(item, i){ item.minthisdescription = !$scope.minalldescriptions; }); } }

javascript angularjs