We Keep Coding

Using one global filter pipe in Angular 10

I have a set of items that I want to segment into different sections like section A, B, and C. When the user searches for the name, it updates the view of each section based on their search. This is my component HTML (allItems = [{name:"someName", "items":Items[]}, {name:"someName2", "items":Items[]}, ...]):
<ng-container *ngFor="let itemSection of allItems ">
<div class="section-title">{{itemSection.name}}</div>
<ul class="item-grid">
<ng-container *ngFor="let item of itemSection.items | itemFilter : searchText : searchType">
<li class="item" (click)="addItem(item)">
<div class="item-block">
<div class="bg-black" [ngClass]="isVisibleClass(item)">
<img class="item-img" [src]="item.img" />
</div>
</div>
</li>
</ng-container>
</ul>
</ng-container>
As the number of itemSection's grow, it applies multiple of the same filter pipe to each of those sections, making it laggy because of the constant filter on different items. I would rather apply one itemFilter pipe to all of items, add to it's respective div then render it:
<div id="a"></div>
<div id="b"></div>
<ng-container *ngIf="items$ | async as items">
<ng-container *ngFor="let item of items | itemFilter : searchText : searchType">
if item section == "a", put in div a
else if item section == "b", put in div b
...
</ng-container>
</ng-container>
then render the contents of div a and b
I'm not sure how to make it less laggy with only applying the result of one filter pipe, but also segment the results into different sections. Any suggestions?

How can I pull a specific title from an array using Angular?

I am trying to pull a specific title from an array using Angular.
Whilst I can use ng-repeat to loop through all titles and print these to my news listing webpage, I only wish to pull the first heading in my array for the news details page. Do I need to use the ng-repeat or can I use something different?
I have tried using number:0 as well as json:0.
$scope.newsListings = [
{
title: "Why cooking is great";
},
{
title: "Windsurfing is fun";
}
];
<div ng-controller="primaryController">
<article>
<div ng-repeat="item in newsListings | json:0">
<h1>{{item.title }}</h1>
<p class="synopsis">{{item.synopsis}}</p>
</div>
<article>
</div>

If you want to show only one item, you can omit the ng-repeat part as you want only one item from your array. You need just to use index.
<div ng-controller="primaryController">
<article>
<div>
<h1>{{ newsListings[0].title }}</h1>
<p class="synopsis">{{ newsListings[0].synopsis }}</p>
</div>
<article>
</div>

You can actually use ng-model for this with a first element of array if you need 2 way binding as well (for inputs of course). For other purposes you can use just index.
<div ng-controller="primaryController">
<article>
<div>
<input type="text" ng-model="newsListings[0].title" />
</div>
<div ng-bind="newsListings[0]">
<h1>{{newsListings[0].title }}</h1>
<p class="synopsis">{{newsListings[0].synopsis}}</p>
</div>
<article>
</div>

How to use ng-repeat in array of objects?

Do you have an idea ?
I tried to make an Array of arrays with ng-repeat like this :
jsfiddle example
function MyCtrl($scope) {
$scope.items =
[
{'adam1': [{id:10, content:test1}, {id:11, content:test2},
{id:12, content:test3}]},
{'adam2': [{id:20, content:test4}, {id:21, content:test5},
{id:30, content:test6}]},
{'adam1': [{id:10, content:xxx}]}
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<ul>
<li ng-repeat="(key, value) in items">{{key}}: {{value.content}}</li>
</ul>
</div>

One way to do that (fiddle):
<div ng-repeat="item in items">
<ul ng-repeat="(key, value) in item">
<li ng-repeat="obj in value">{{obj.content}}</li>
</ul>
</div>
That said you might want to rearrange the structure so as to avoid nested ng-repeat.

Your method of assigning variables works fine, but probably not as you're expecting: updated jsfiddle
The content item will not be available, as value is each object within the main array; you'll need to cycle through their properties (i.e. the adamX keys) to get the nested arrays.

How to divide separate parts the list created via ng-repeat?

I made list of countries that are shown via ng-repeat:
<ul>
<li ng-repeat="country in countries.country | filter:search:startsWith">{{ country }}</li>
</ul>
Before that I've created an sorted array with all that countries:
var countriesNotSorted = ['Ukraine','Urugvai','Russia','Romania','Rome','Argentina','Britain','Indonesia','Germany','Brazil','Portugal','Polska','Uganda','Algeria','Andorra'],
countriesArray = countriesNotSorted.sort();
Also I have list with clickable letters, when one of them is clicked list become sorted. Question is: is it possible in very beggining to divide the list of countries (that are shown via Angular ng-repeat) on separate parts, so Algeria, Andorra, Argentina and all countires start on 'A' will appear after some heading (e.g uppercase letter 'A')?
A:
Algeria
Argentina
Andorra
B:
Brazil
Bolgaria
Belgium
Here is my Plnkr
Thanx for your attention and time in advance

You can simply ng-repeat over your alphabet array.
<div class="container">
<input id="q" type="text" ng-model="search " />
<div ng-repeat="letter in alphabet.letter" ng-show="countriesFiltered.length > 0">
<h3>{{letter}}</h3>
<ul>
<li ng-repeat="country in (countriesFiltered = (countries.country | filter:letter:startsWith | filter:search:startsWith))">{{ country }}</li>
</ul>
</div>
</div>
Plnkr

How to filter a list in AngularJS using several links

I have been going over a lot of tutorials on how to filter a list and can't find an example for my simple use-case.
I have several buttons such as
Name
Age
Height
I have var persons = {...} object and I display it like
<div ng-repeat="person in persons">
{{person.name...}}
</div>
How do I create a filter so each time I will click on one of the buttons the list will be filtered ?
I have tried addingng-repeat="person in persons | filter:filterPersons"
and on the script side to write:
$scope.filterPersons(person){
if (person.name == "John")
return person;
}
but this is only one use-case (how can I filter by another name?) - in other words - How do I connect the links to the filter?

You can bind your filter to scope variables as you do with any other thing. So all you need is to set the appropriated filter to the scope when the user click and bind it to the ng-repeat filter param. See:
<div ng-app>
<span ng-click="myFilter = {type: 1}">Type 1</span> |
<span ng-click="myFilter = {type: 2}">Type 2</span> |
<span ng-click="myFilter = null">No filter</span>
<ul ng-controller="Test">
<li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li>
</ul>
</div>
function Test($scope) {
$scope.persons = [{type: 1, name: 'Caio'}, {type:2, name: 'Ary'}, {type:1, name: 'Camila'}];
}
Notice that the myFilter is changed when the user clicks the filter, and that it's bound to the ng-repeat filter. Fiddle here. You could also create a new filter, but this solution is far better.

My response is very similar to Caio's. I just wanted to show how to filter out an existing array.
In my ng-repeat I have a search filter that goes through the words. I wanted tabs to look for a string match. So I added a additional filter
<tr class="unEditableDrinks" ng-repeat="drink in unEditableDrinkList | orderBy:'-date'|limitTo:400|filter:search |filter:myFilter">
<td>[[drink.name]]</td>
I only have the top part of my table but this should show the strategy. The second filter called myFilter is attached to the buttons below.
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" ng-click="myFilter={name:'soda'}">Soda</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" ng-click="myFilter={name:'energy'}">Energy Drinks</button>
</div>
On each button I am able to add a ng-click that goes through myFilter and searches the td with drink.name. In each ng-click I can set the value of name to search. So every title containing soda or energy can be filtered through.