Order increasing and decreasing angularjs

Question

Order increasing and decreasing angularjs

Navigation

#1 by (3 votes)

3

I have a dataset that organizes it by choosing, growing or decreasing, or I can leave it in the order that it already is. The system works normally with the order of the elements, the problem is that the elements are only being shown when the sample order, ascending or descending, is selected in a select.

I would like to solve the question: how to show the elements without having to select the sample order so that this selection is indeed optional?

<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"
}];

javascript angularjs select

asked by anonymous 06.12.2016 / 15:25

1 answer

How is a struct organized in memory? Line change in array

score 3 · Accepted Answer

The first thing is that you are forcing the ordering in HTML . When you have a dynamic ordering it is easier to do and cleaner is done in controller . Secondly you have a ng-if and this limits the view to only the "Ascending" option. Here's an example of how you can dynamically do it.

(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><divng-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>