Filter array by first letter

Question

Filter array by first letter

Navigation

#1 by (2 votes)
#2 by (1 votes)

3

I have an array of objects and need to separate it by the letters of the alphabet, so I need to limit the items by the corresponding letter.

Example:

A - Aston Martin

B - Bugatti

angular.module("myApp", [])
	.controller("myCtrl", function ($scope) {
		$scope.alphabet = [
        "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
    ];
  
    $scope.brands = [
        {"brand": "Ferrari"},
        {"brand": "Aston Martin"},
        {"brand": "Koenigsegg"},
        {"brand": "Lamborghini"},
        {"brand": "Bugatti"},
        {"brand": "Maserati"},
        {"brand": "Pagani"},
        {"brand": "Porsche"}
    ]
	});

.multi-column {
  column-count: 3;
  column-gap: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><bodyng-app="myApp">

  <div class="container" ng-controller="myCtrl">    
    <div class="row">
      <div id="{{letter}}" class="col-xs-12" ng-repeat="letter in alphabet">
        <h2>{{letter}}</h2>
        <ul class="list-unstyled multi-column">
          <li ng-repeat="x in brands"><a href="">{{x.brand}}</a></li>
        </ul>
      </div>
    </div>
  </div>
  
</body>

Also add codepen.io

And so on.

javascript angularjs

asked by anonymous 19.06.2018 / 16:36

2 answers

1

I do not know if this is the best way, but we can do this with ng-show , validating if the first letter of the mark is equal to the letter of the grouping it displays, otherwise it ignores. Look how it went.

I've added:

ng-show="x.brand[0] == letter"

Complete code:

angular.module("myApp", [])
	.controller("myCtrl", function ($scope) {
		$scope.alphabet = [
        "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
    ];
  
    $scope.brands = [
        {"brand": "Ferrari"},
        {"brand": "Aston Martin"},
        {"brand": "Koenigsegg"},
        {"brand": "Lamborghini"},
        {"brand": "Bugatti"},
        {"brand": "Maserati"},
        {"brand": "Pagani"},
        {"brand": "Porsche"}
    ]
	});

.multi-column {
  column-count: 3;
  column-gap: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><bodyng-app="myApp">

  <div class="container" ng-controller="myCtrl">    
    <div class="row">
      <div id="{{letter}}" class="col-xs-12" ng-repeat="letter in alphabet">
        <h2>{{letter}}</h2>
        <ul class="list-unstyled multi-column">
          <li ng-repeat="x in brands" ng-show="x.brand[0] == letter"><a href="">{{x.brand}}</a></li>
          
        </ul>
      </div>
    </div>
  </div>
  
</body>

19.06.2018 / 16:50

How to delete a foreign key MySql FieldByName parameter bold

score 2 · Accepted Answer

Create a function and make a filter in it:

$scope.filtrar = function(letter) {
  return $scope.brands.filter(b => b.brand[0] === letter);
}

Then call it on the ng-repeat="x in filtrar(letter)" loop, other than ng-show , the function will return only the elements that start with the letter entered in the letter parameter, already ng-show will render the elements and show them begin with letter and the other elements were hidden in the page.

Working code

angular.module("myApp", [])
	.controller("myCtrl", function ($scope) {
		$scope.alphabet = [
        "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
    ];
  
    $scope.brands = [
        {"brand": "Ferrari"},
        {"brand": "Aston Martin"},
        {"brand": "Koenigsegg"},
        {"brand": "Lamborghini"},
        {"brand": "Bugatti"},
        {"brand": "Maserati"},
        {"brand": "Pagani"},
        {"brand": "Porsche"}
    ];
  
    $scope.filtrar = function(letter) {
      return $scope.brands.filter(b => b.brand[0] === letter);
    }
	});

.multi-column {
  column-count: 3;
  column-gap: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><bodyng-app="myApp">

  <div class="container" ng-controller="myCtrl">    
    <div class="row">
      <div id="{{letter}}" class="col-xs-12" ng-repeat="letter in alphabet">
        <h2>{{letter}}</h2>
        <ul class="list-unstyled multi-column">
          <li ng-repeat="x in filtrar(letter)"><a href="">{{x.brand}}</a></li>
        </ul>
      </div>
    </div>
  </div>
  
</body>

Reference

filter