Menu icon Foundation
Unable to filter with toolpanel

I'm trying to filter a list of items (ng-repeat with cards) with buttons on the toolpanel and not matter I try it isn't working. I've also tried to move the search and buttons just above the items (out of the toolpanel) and only the search was working but not the buttons to filter...any help would be appreciated.

<zf-panel position="top" id="toolpanel" >
<a zf-close="" class="close-button">Fermer Outils</a>
<div class="text-center">
  <br>
  <div class="grid-content">
    <br>
    <br>
    <br>
    <a class="large button alert" ng-click="catFilter = {productsItem.category: 'Accéssoires'}">Accéssoires</a>
    <a class="large button dark" ng-click="catFilter = {productsItem.category: 'Bois'}">Bois</a>
    <a class="large button secondary" ng-click="catFilter = {productsItem.category: 'Céramique'}">Céramique</a>
    <a class="large button warning" ng-click="catFilter = {productsItem.category: 'Tapis'}">Tapis</a>
    <a class="large button primary" ng-click="catFilter = {productsItem.category: 'Tapis Deco'}">Tapis Deco</a>
    <a class="large button success" ng-click="catFilter = {productsItem.category: 'Vinyls'}">Vinyls</a>
  </div>
  <div class="grid-block medium-12">
    <div class="grid-content align-center">
      <br>
      <label>
        <h3>Recherche</h3>
        <span class="inline-label" id="searchItems">
          <input placeholder="Rechercher marque ou produit" ng-model="search">
          <a zf-close class="button large outilBtn">Recherche</a>
        </span>
      </label>
    </div>
  </div>
</div>
</zf-panel>
<br>
<div class="grid-content text-center small-12">
  <br>
  <a href="#" zf-toggle="toolpanel" class="button large outilBtn">Outils de recherche</a>
  <h3 class="subheader">Cliquez sur 'Outils de recherche' pour filtrer les items ci-dessous.
  </h3>
  <br>
</div>
<div class="grid-block small-12 small-up-2 medium-up-2 large-up-3" ng-controller="productsCtrl" ng-class="">
  <div class="grid-content" ng-repeat="productsItem in productsItems | filter:search:strict">
    <a zf-open="#{{$index}}"><div ng-class="{'success card': productsItem.category == 'Vinyls', 'primary card': productsItem.category == 'Tapis Deco', 'warning card': productsItem.category == 'Tapis', 'secondary card': productsItem.category == 'Céramique', 'dark card': productsItem.category == 'Bois', 'alert card': productsItem.category == 'Accéssoires'}">
      <img ng-src="http://cpanel.mannydesigns.co:3000/api/containers/container3/download/{{productsItem.image}}" class="cardSize" alt="{{productsItem.name}}">
      <div class="card-divider">
        {{productsItem.category}}
      </div>
      <div class="card-section">
        <h4>{{productsItem.name}} - {{productsItem.brand}}</h4>
        <p>{{productsItem.description | limitTo: 55}}</p>
      </div>
    </div></a>
    <div zf-modal="" id="#{{$index}}">
      <a zf-close="#{{$index}}" class="close-button">×</a>
      <h3>{{productsItem.category}}</h3>
      <p>{{productsItem.description}}</p>
      <a class="button outilBtn" href="{{productsItem.link}}" target="_blank">Voir site</a>
    </div>
  </div>
</div>
            

         

toolpanelng-repeatfilter

I'm trying to filter a list of items (ng-repeat with cards) with buttons on the toolpanel and not matter I try it isn't working. I've also tried to move the search and buttons just above the items (out of the toolpanel) and only the search was working but not the buttons to filter...any help would be appreciated.

<zf-panel position="top" id="toolpanel" >
<a zf-close="" class="close-button">Fermer Outils</a>
<div class="text-center">
  <br>
  <div class="grid-content">
    <br>
    <br>
    <br>
    <a class="large button alert" ng-click="catFilter = {productsItem.category: 'Accéssoires'}">Accéssoires</a>
    <a class="large button dark" ng-click="catFilter = {productsItem.category: 'Bois'}">Bois</a>
    <a class="large button secondary" ng-click="catFilter = {productsItem.category: 'Céramique'}">Céramique</a>
    <a class="large button warning" ng-click="catFilter = {productsItem.category: 'Tapis'}">Tapis</a>
    <a class="large button primary" ng-click="catFilter = {productsItem.category: 'Tapis Deco'}">Tapis Deco</a>
    <a class="large button success" ng-click="catFilter = {productsItem.category: 'Vinyls'}">Vinyls</a>
  </div>
  <div class="grid-block medium-12">
    <div class="grid-content align-center">
      <br>
      <label>
        <h3>Recherche</h3>
        <span class="inline-label" id="searchItems">
          <input placeholder="Rechercher marque ou produit" ng-model="search">
          <a zf-close class="button large outilBtn">Recherche</a>
        </span>
      </label>
    </div>
  </div>
</div>
</zf-panel>
<br>
<div class="grid-content text-center small-12">
  <br>
  <a href="#" zf-toggle="toolpanel" class="button large outilBtn">Outils de recherche</a>
  <h3 class="subheader">Cliquez sur 'Outils de recherche' pour filtrer les items ci-dessous.
  </h3>
  <br>
</div>
<div class="grid-block small-12 small-up-2 medium-up-2 large-up-3" ng-controller="productsCtrl" ng-class="">
  <div class="grid-content" ng-repeat="productsItem in productsItems | filter:search:strict">
    <a zf-open="#{{$index}}"><div ng-class="{'success card': productsItem.category == 'Vinyls', 'primary card': productsItem.category == 'Tapis Deco', 'warning card': productsItem.category == 'Tapis', 'secondary card': productsItem.category == 'Céramique', 'dark card': productsItem.category == 'Bois', 'alert card': productsItem.category == 'Accéssoires'}">
      <img ng-src="http://cpanel.mannydesigns.co:3000/api/containers/container3/download/{{productsItem.image}}" class="cardSize" alt="{{productsItem.name}}">
      <div class="card-divider">
        {{productsItem.category}}
      </div>
      <div class="card-section">
        <h4>{{productsItem.name}} - {{productsItem.brand}}</h4>
        <p>{{productsItem.description | limitTo: 55}}</p>
      </div>
    </div></a>
    <div zf-modal="" id="#{{$index}}">
      <a zf-close="#{{$index}}" class="close-button">×</a>
      <h3>{{productsItem.category}}</h3>
      <p>{{productsItem.description}}</p>
      <a class="button outilBtn" href="{{productsItem.link}}" target="_blank">Voir site</a>
    </div>
  </div>
</div>
            

         
Jeanie Chung almost 5 years ago

Hi Emmanuel, can you show me what's going on in your controller as well? This may just be a scoping issue within the directives.