嵌套過濾JSON使用複選框以AngularJS

我有一個JSON數據，我需要創造一個角嵌套過濾器的搜索。如果你們可以幫助我，因爲我是新手，但我覺得很困難。嵌套過濾JSON使用複選框以AngularJS

2016-12-06 ravi yarlagadda

你應該做一個小提琴 – Ronnie

我沒有你的CSS，但在較高水平應該是這樣THIS和多過濾器使用addToFilter參考THIS

在複選框我加入過濾器類別的點擊我的陣列中的一個功能。

HTML

<input type="checkbox" ng-checked="item.checked" ng-model="item.checked" ng-click="addToFilter(item.node.category)"/> {{ item.node.category }}

HTML

代碼濾波器：categoryFilter將根據所選類別從陣列篩選記錄。

<div ng-repeat="item in nodes | filter:categoryFilter | orderBy:'node.location' | groupBy:['node.location'] "> 
    <h2 ng-show="item.group_by_CHANGED">{{item.node.location}}</h2> 
     <ul> 
      <li>{{item.node.title}}</li> 
     </ul></div>

這JS代碼是檢查當從陣列中添加所選的類別和除去未選中時。

$scope.filtersApplied =[]; 
$scope.addToFilter = function(category) 
{ 
    var i = $.inArray(category.trim(), $scope.filtersApplied); 
    console.log(category); 
    if (i > -1) { 
    $scope.filtersApplied.splice(i, 1); 
    } else { 
    $scope.filtersApplied.push(category.trim()); 
    } 
} 
$scope.categoryFilter = function(node) { 
    if ($scope.filtersApplied.length > 0) { 
    if ($.inArray(node.node.category.trim(), $scope.filtersApplied) < 0) 
    return; 
    } 
return node; 
}

**請忽略我的分組代碼。我只是想模擬你在圖像中顯示的內容。

更新SAMPLE與CSS

來源

2016-12-06 21:04:45 user3249448

你好，你給具體的方式我需要什麼，但你剛纔複製的JSON數據，但我需要在每次調用它，因爲它是動態的數據，它會每改變一次都要改變。來到顏色部分有什麼辦法，我可以生成隨機類的位置名稱，因爲我需要分配不同的顏色到不同的位置。請告訴我。非常感謝您的幫助。 –

Angular支持雙向綁定，因此當您使用新數據更改變量時，所有過濾器和分組將自動爲您自動更新。對於COLOR CSS，您可以創建自定義類並根據索引進行應用。爲了實現這一點，您需要先進行分組並確定標題並跟蹤索引。基於索引，您可以應用CSS，並在過濾時保持修復狀態。我已經爲你更新了樣本。有很多方法可以實現它。 – user3249448

你提供的方式工作非常好。我只有一個問題是，有沒有什麼辦法，我們可以安排在根據每個位置的商店名稱按字母順序排列，現在存儲標題是顯示炒的方法。@ user3249448。感謝您的努力。 –

嵌套過濾JSON使用複選框以AngularJS

回答

相關問題