ng-repeat：顯示一個點擊並隱藏其他項目

我有一個ng-repeat顯示divs的列表，當我點擊一個時，它顯示一個點擊項目的自動div。ng-repeat：顯示一個點擊並隱藏其他項目

這是工作

<div ng-repeat="item in items"> 

    <div ng-click="showfull = !showfull"> 
     <div> 
      <h1>{{item.title}}</h1> 
      <p>{{item.content}}</p> 
     </div> 
    </div> 
    <div ng-show="showfull"> 
     <p>{{item.info}}</p> 
    </div> 
    <hr/> 
</div>

我的項目是從包含項目列表的JSON加載，每個項目都在此JSON默認attribut showfull設置爲false。這是行得通的，但現在我想在單擊項目時隱藏列表中的所有其他項目。我tryied是這樣的：

這不是工作

<div ng-repeat="item in items"> 

    <div ng-click="expand(item)"> 
     <div> 
      <h1>{{item.title}}</h1> 
      <p>{{item.content}}</p> 
     </div> 
    </div> 
    <div ng-show="showfull"> 
     <p>{{item.info}}</p> 
    </div> 
    <hr/> 
</div>

，並在控制器中我添加了一個功能：

$scope.expand = function(e) { 
    e.showfull = !e.showfull; 
    //TODO: put here a foreach logic to hide all other items 
}

但是，即使沒有在foreach這個邏輯沒有工作，該項目單擊時不顯示額外div。我有兩個問題：

我想這是因爲item被在expand功能或者某種範圍的隔離問題，「通過複製傳遞」，但你能解釋我爲什麼在細節？解決
如何隱藏其他所有項目的額外的div當我點擊一個項目，顯示該項目的其它附加內容？我需要做一個指令嗎？ 沒有解決

感謝

來源

2014-10-16 deKajoo

我認爲你在正確的軌道上。您需要在該項目上設置showfull，然後使用ng-show或ng-if來隱藏它，或者像Gavin提到的那樣，使用一個類。

在ng-click上，您可以撥打expand函數，在您傳遞該項目的位置切換它並將所有其他項設置爲隱藏。

模板：

<div ng-repeat="item in items> 
    <div ng-click="expand(item)"> 
     <div> 
      <h1>{{item.title}}</h1> 
      <p>{{item.content}}</p> 
     </div> 
    </div> 
    <div ng-show="item.showfull"> 
     <p>{{item.info}}</p> 
    </div> 
    <hr/> 
</div>

控制器：

$scope.expand = function (item) { 
    angular.forEach($scope.items, function (currentItem) { 
     currentItem.showfull = currentItem === item && !currentItem.showfull; 
    }); 
};

來源

2014-10-16 16:00:33 PzYon

你擴大法修改的項目，所以你的NG-顯示需要參考的項目：

<div ng-show="item.showfull"> 
    <p>{{item.info}}</p> 
</div>

要隱藏所有的項目你需要做點像

$scope.expand = function(item) { 
    angular.forEach(items, function(i) { 
     if (i === item) { 
      i.showfull = !i.showfull; 
     } else { 
      i.showfull = false; 
     } 
    }); 
};

來源

2014-10-16 15:54:12 Vadim

感謝，似乎工作，如果我沒有在角度的角度參考項目會發生什麼？ Angular不會將項目鏈接到ng-show動作？ – deKajoo 2014-10-16 15:58:24

@deKajoo如果你沒有引用這個項目，你將會違背'$ scope.showfull' – Vadim 2014-10-16 15:59:33

第二個問題：爲了隱藏所有其他項目，我應該在控制器函數中使用'angular.forEach'還是有更好的方法？（編輯：感謝您的第一個答案） – deKajoo 2014-10-16 15:59:54

應該不是你想顯示會引用該項目的第二個div？

<div ng-repeat="item in items> 

    <div ng-click="expand(item)"> 
     <div> 
      <h1>{{item.title}}</h1> 
      <p>{{item.content}}</p> 
     </div> 
    </div> 
    <!-- Added item to ng-show --> 
    <div ng-show="item.showfull"> 
     <p>{{item.info}}</p> 
    </div> 
    <hr/> 
</div>

來源

2014-10-16 16:00:40 Oliver

ng-repeat：顯示一個點擊並隱藏其他項目

回答

相關問題