CODEWITHSUNDEEP
angularjs
user2212908
user2212908

Reputation: 79

how to hide\show list items from button in angular js

i have list of items and i want to create filter from button that shows\hides the element, instead of add\remove it from the DOM.

<li ng-repeat="li in list" ng-show="">
<a ng-click="">category</a>
</li>

i mean that instead of filtering list i want to hide\show list items by this filter. i found this fiddle http://jsfiddle.net/cKa6K/

but i want to do the same only with hide\show.

Upvotes: 1

Views: 5555

Answers (1)

DotDotDot
DotDotDot

Reputation: 3566

Without more information on your code, I'd do something like that : http://jsfiddle.net/DotDotDot/tpmxN/1/
I used an item list with 2 properties, the name and a category
I defined a function for the ng-show, which will compare the item category to the filter

 <li ng-repeat="li in list" ng-show="isDisplayed(li, filter)">

Then in the controller the function is defined by : 

 $scope.isDisplayed=function(item, filter){
 if(filter!="")
 {
     if(item.category==filter)
         return true;
     return false;
 }
    return true;
}

Nothing really hard in this, then you just have to set the filter property, I used buttons with ng-click and the category in the ng-repeat, you can click on them, it will hide/show the proper items

I hope this helps

Have fun

Upvotes: 4

Related Questions