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

最小化所有描述


{{item.Headline}
{{item.Description}
函数myController（$scope）{
$scope.MinAllDescriptions=false；
$scope.ItemList=[
{标题：“第一项”，说明：“这是第一项”}，
{标题：“第二项”，说明：“这是第二项”}，
{标题：“第三项”，说明：“这是第三项”}，
{标题：“第四项”，说明：“这是第四项”}，
{标题：“项目五”，说明：“这是项目五”}
];
}

在这里查看JSFIDLE:

试试这个-

Html

---

将事件添加到复选框并设置$scope.MinAllDescriptions=$scope.MinAllDescriptions

为什么不将MinThisDescription与itemList中的项绑定？在同一个标记上有ng show和ng hide，删除该标记并放置一个logicHey，类似于三态复选框实现。您应该仅基于此描述显示/隐藏。此外，MinAllDescriptions click应根据是否至少有一个项目可见来设置/重置所有MinThisDescription。你可以模仿gmail的行为。

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