無法崩潰，並顯示不正確的符號

我可以能夠search或filter的名稱，可以從input search以及對給定圖標clicking看到他們的詳細資料（即我可以expand/collapse）在給定的Fiddle。無法崩潰，並顯示不正確的符號

但我面臨的問題很少，如：

a）。如果我search任何名稱或從輸入字段的任何細節，那麼它的filtering和showing各自的數據（即它是expanding - 這很好），但我不能collapse它在filtering（即點擊「-」標誌，相應的數據是not collapsing），然後

b）。如果我remove任何搜索從輸入字段的數據，那麼所有的數據將是collapsed（這是罰款），但他們在「-」崩潰的標誌，而不是「+」簽署

請幫幫我，怎麼解決這些事情，並提前感謝！

來源

2017-06-22 Guna

您可能會認爲它可以刪除大部分功能並獲得工作結果。以下的jsfiddle爲例。如果您希望在搜索時擴展所有搜索結果，並且在搜索字段關閉時關閉所有搜索結果，建議您創建一個篩選器以將所有結果設置爲展開或不展開。

<div ng-controller="repeatPeople"> 
 
    <br> 
 
    <p> 
 
    <input type="text" id="search" ng-model="searchPeople" placeholder="Search"> 
 
    </p> 
 
    <br> 
 
    <br> 
 
    <table border="0"> 
 
    <thead style="background-color: lightgray;"> 
 
     <tr> 
 
     <td style="width: 30px;">Click</td> 
 
     <td>Name</td> 
 
     <td>Gender</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat-start="person in result = (people | filter:searchPeople)"> 
 
     <td> 
 
      <button ng-if="person.expanded" ng-click="person.expanded = !person.expanded">-</button> 
 
      <button ng-if="person.expanded == false" ng-click=" person.expanded = !person.expanded">+</button> 
 
     </td> 
 
     <td>{{person.name}}</td> 
 
     <td>{{person.gender}}</td> 
 
     </tr> 
 
     <tr ng-if="person.expanded" ng-repeat-end=""> 
 
     <td colspan="3">{{person.details}}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

工作例如：https://jsfiddle.net/rn6fcrc8/

如果您想要搜索全部展開搜索或關閉所有明確的檢索算法應該創建一個過濾器來處理這個功能。它應該是這樣的：

// Setup the filter 
 
angular.module('app').filter('expandAll', function() { 
 

 
    return function(filteredPeople, people) { 
 

 
     if (filteredPeople.length != people.length){ 
 
      for(var person in filteredPeople){ 
 
      person.expanded = true; 
 
      } 
 
     } 
 
     else { 
 
      for(var person in filteredPeople){ 
 
      person.expanded = false; 
 
      } 
 
     } 
 
     var output = angular.copy(filteredPeople); 
 
     return output; 
 

 
    } 
 

 
});

然後，只需添加過濾器到你的NG-repeat語句就應該是這樣的，請注意，這是基於關閉以前的jsfiddle我張貼：

 <tr ng-repeat-start="person in result = (people | filter:searchPeople | expandAll:people)">

來源

2017-06-22 19:05:58

感謝您的回覆，但我不是真的在尋找它，它應該擴展數據過濾/搜索默認按照我的小提琴，並應按照我的擔憂collpase。我有一個解決方案來擴展/崩潰像你的演示，但我需要我的問題。請告訴我。 – Guna

我已經添加了更多描述expandAll功能的答案。 –

如果我在這裏運行，它會給出錯誤嗎？ – Guna

無法崩潰，並顯示不正確的符號

回答

相關問題