각 항목 및 모든 항목에 대해 각도 JS 숨기기/표시

Question

각 항목에 대한 제목과 설명이있는 리피터가 있습니다. 체크 박스를 사용하여 모든 설명을 한 번에 숨길 수 있기를 바랍니다. 이것은 쉽게 끝났다. 그런 다음 각 설명을 개별적으로 숨기거나 표시 할 수 있기를 원합니다. 한 가지 문제를 제외하고는 거의 작동했습니다. 확인란에 설명을 모두 숨긴 다음 한 설명을 클릭하면 두 번째 클릭 할 때까지 아무런 변화가 없습니다.

주위에 경로가 있습니까?

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

체크 아웃 jsfiddle 여기 : 여기

내 코드입니다 http://jsfiddle.net/195k2e9n/1/

Answer 1

이 시도 -

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

각도 http://jsfiddle.net/7Lbgjvz7/

HTML을

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; 
     }); 
    } 
} 

Answer 2

체크 박스에 이벤트를 추가하고 $ scope.MinAllDescriptions을 설정 =! $ scope.MinAllDescriptions