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

试试这个 - 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;
        });
    }
}

Answer 2

在复选框中添加一个事件并设置$ scope.MinAllDescriptions =！$ scope.MinAllDescriptions

Angular JS隐藏/显示每个项目和所有项目

2 个答案: