Angular JS隱藏/顯示每個項目和所有項目

我有一箇中繼器，每個項目的標題和說明。我希望能夠在複選框的幫助下一次性隱藏所有描述。這很容易完成。然後，我希望能夠分別隱藏或顯示每個描述。除了一個問題：我隱藏了所有的描述，然後點擊一個描述來顯示它，直到我第二次點擊該描述，才發現它沒有任何反應。Angular JS隱藏/顯示每個項目和所有項目

有沒有辦法解決它？

這裏是我的代碼：

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

來源

2014-10-20 noodle

你爲什麼不與存在於itemList中項目結合MinThisDescription？ – Paras 2014-10-20 07:30:17

你在同一個標簽上同時顯示ng-show和ng-hide，刪除並放置一個邏輯 – harishr 2014-10-20 07:30:19

嘿，它像三態複選框實現。只能根據MinThisDescription顯示/隱藏。此外MinAllDescriptions點擊應該設置/重置所有MinThisDescription根據是否至少有一個項目可見。你可以模仿gmail的行爲。 – Amitesh 2014-10-20 07:50:25

試試這個 - 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>

角

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

來源

2014-10-20 07:40:50 Yasser

謝謝，它效果很好！ :) – noodle 2014-10-20 08:13:54

添加事件到複選框，並設置$ scope.MinAllDescriptions！= $ scope.MinAllDescriptions

來源

2014-10-20 07:40:52

Angular JS隱藏/顯示每個項目和所有項目

回答

相關問題