Question :
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 - Bugattiangular.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.
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
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>