3

Galera tenho um conjunto de dados que o organizo mediante a uma escolha, crescente ou decrescente, ou posso deixar na ordem que já se encontra. O sistema funciona normalmente com a ordem dos elementos, o problema é que os elementos só estão sendo mostrados quando é selecionada a órdem de amostra, crescente ou decrescente, em um select.

Gostaria de solucionar a questão: como mostrar os elementos sem a necessidade de selecionar a órdem de amostra para que essa seleção seja de fato facultativa?

<select ng-model="selectedChoice">
  <option ng-repeat="choice in choices" value="{{choice.name}}" ng-init="Todos">{{choice.name}}</option>
</select>

<div ng-if="selectedChoice == 'Crescente'">
  <div class="col-12">
    <div class="col-4 ladolado" ng-repeat="organ in organs | orderBy: '+name' " ng-if="organ.attachment.url != null">
      <a href="{{organ.url}}" class="decoracao section">
        <img ng-src="{{organ.attachment.url}}" border="0" />
        <span><br><p>{{organ.name}}</p>
	  <small class="zero">quantidade de serviços : {{organ.services.length}}</small>
	</span>
      </a>
      <br/>
      <br/>
    </div>
  </div>
  <div class="col-12">
    <div class="col-4 ladolado" ng-repeat="organ in organs | orderBy: '+name'" ng-if="organ.attachment.url == null">
      <a href="{{organ.url}}" class="decoracao section">
        <img src="/assets/layout/missing1.png" border="0" /><span><br><p>{{organ.name}}</p>
<small class="zero">quantidade de serviços : {{organ.services.length}}</small></span>
      </a>
      <br/>
      <br/>
    </div>
  </div>
</div>

$scope.choices = [{
  name: "Crescente"
}, {
  name: "Decrescente"
}];

1 Resposta 1

3

A primeira coisa é que você está forçando a ordenação no HTML. Quando você possuir uma ordenação dinâmica fica mais fácil de fazer e mais limpo realiza-lo no controller. Em segundo lugar você tem um ng-if e isso limita a visualização apenas para a opção "Crescente". Segue um exemplo de como você pode fazer dinamicamente.

(function() {
  'use strict';

  angular
    .module('appExemploOrdenacao', []);

  angular
    .module('appExemploOrdenacao')
    .controller('OrdenacaoController', OrdenacaoController);

  OrdenacaoController.$inject = ['$filter'];

  function OrdenacaoController($filter) {
    var ordenacao = this;
    var servicos = [];

    ordenacao.opcoes = [];

    ordenacao.organizar = organizar;
    
    iniciar();
    
    function iniciar() {
      servicos.push({nome: 'Serviço 1'});
      servicos.push({nome: 'Serviço 12'});
      servicos.push({nome: 'Serviço 123'});
      servicos.push({nome: 'Serviço 12345'});
      servicos.push({nome: 'Serviço 123457'});
      servicos.push({nome: 'Serviço 123456'});      
      servicos.push({nome: 'Serviço 1234578'});
      servicos.push({nome: 'Serviço 1234'});
      
      ordenacao.opcoes = [{name: ''}, {name: 'Crescente'}, {name: 'Decrescente'}];
    }

    function organizar() {
      if (ordenacao.selecionado.name === 'Crescente') {
        return $filter('orderBy')(servicos, '+nome');
      } else if (ordenacao.selecionado.name === 'Decrescente') {
        return $filter('orderBy')(servicos, '-nome');
      } else {
        return servicos;
      }
    }
  }
})()
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appExemploOrdenacao">
  <div ng-controller="OrdenacaoController as ordenacao">
    <select ng-init="ordenacao.selecionado = ordenacao.opcoes[0]"
            ng-options="opcao.name for opcao in ordenacao.opcoes"
            ng-model="ordenacao.selecionado">
    </select>
    
    <div ng-repeat="servico in ordenacao.organizar()">
      {{servico.nome}}
    </div>
  </div>
</div>

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 .