4

Bem, o conteúdo de uma página do meu site é gerado a partir do seguinte modelo de JSON:

[
  {
    "company":{
      "name":"Nome do Cliente",
      "url":"#"
    },
    "client":{
      "name":"Projeto",
      "url":"#"
    },
    "tags":[
      "tag1",
      "tag2",
      "tag3"
    ],
    "description":"Lorem Ipsum",
    "image":"#"
  }
]

E então é exibido da seguinte forma:

<div class="row portfolio-item" ng-repeat="project in projects">
    <div class="image hidden-sm hidden-xs col-md-6">
        <img class="layout" src="{{project.image}}">
        <span class="mask"></span>
    </div>
    <section class="col-md-6 col-sm-12 col-xs-12 portfolio-content">
        <header>
            <h2>{{project.company.name}}/{{project.client.name}}</h2>
            <nav class="tags">
                <a ng-repeat="tag in project.tags" href="/tag/{{tag}}">{{tag}}</a>
            </nav>
        </header>
        <article>
            <p>{{project.description}}</p>
        </article>
    </section>
</div>

Porém, eu gostaria de poder filtrar o conteúdo exibido de acordo com a tag selecionada. Tentei usar o atributo filter:tag, mas o angular não me retorna resultado. ('tag' foi defendia com uma variável de escopo no controller com um dos valores do array 'tags' do JSON)

1

4 Respostas 4

2

Bem, com base na resposta do @Pedro Luz e nesta reposta, cheguei ao seguinte código que solucionou o meu problema:

.filter('filterBySelectedTag', function() {
    return function(projects, selectedTag){
        if(selectedTag == null){
            var filtered = projects;
        }else{
            var filtered = [];
            angular.forEach(projects, function(project) {
                angular.forEach(project.tags, function(tag){
                    if( tag == selectedTag )
                        filtered.push(project);
                });
            });
        }
        return filtered;
    }
});
2
  • 1
    Marque a sua resposta como solução. Ela vai ficar no topo independente de votação.
    – mutlei
    17/12/2014 às 11:21
  • 1
    Só posso marcar minha resposta como solução amanhã... =/ 17/12/2014 às 11:22
0

Como o @Pedro Luz respondeu, a ideia está certa, indo no uso de filtros do Angular, mas eles são usados de outra forma.

Por exemplo, eu quero alterar o jeito que uma data é exibida?

Eu uso o seguinte binding do Angular:

{{ date | (filtro aqui) }}

Exemplificando:

{{ date | dd }}

Que retornaria o dia em formato numérico (17, como hoje é 17 de Dezembro).

0

Mateus, não sei se é exatamente o que você precisa... mas em um dos meus projetos eu possuo um ng-repeat num JSON e monto alguns filtros a partir de valores digitados no <input>. Exemplo abaixo:

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>
        <input type="text" ng-model="search.contactName">
        Nome do contato
      </th>
    </tr>
  </thead>

  <tbody>
    <tr ng-repeat="item in filtered = (list | filter:{contactName: search.contactName })">
      <td>
        <strong>[[ $index + 1 ]]</strong>
      </td>
      <td>[[ item.contactName ]]</td>
    </tr>
  </tbody>
</table>
0

Cara, eu aconselharia você a não reescrever a roda, porque depois a manutenção seria horrível. No seu caso específico, basta você fazer o seguinte

<div ng-repeat="tag in tags | filter: { property: valor }"></div>

Fica muito mais limpo e organizado sem precisar declarar filtros nenhum. Nesse caso, eu passei um objeto para o filter, e não somente um valor

Exemplo: Imagina uma div onde vc queria filtrar os itens ativos, nesse caso seria

<div ng-repeat="item in items | filter: { active: true}">
      <span>{{ item.qualquer_coisa }}</span>
</div>
1
  • creio que não entendestes o que eu quero fazer. Seguindo seu código eu filtraria apenas o loop de tags, sendo que a minha necessidade era filtrar o conteúdo a partir das tags. Além do mais, fiz um teste e seu código não funcionou. Abraço 19/12/2014 às 17:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .