Develop Reference

How to only show specific values using Angular 8 keyvalue pipe

I am wondering how I can only show specific values with the key-value pipe. So far I have tried to do item.value.form_name but that comes up as null when the property is set from my API. When I do item.value then it shows me all of the items in the object. I only want the form name and the organization to show.
Code:
<div class="form-details">
<div *ngFor="let item of form?.results | keyvalue">
<span class="col-6">{{item.value.id}}</span>
<span class="col-6">{{item.value.org}}</span>
</div>
</div>
How the data is being received

Try like this:
Working Demo
<div *ngFor="let item of form?.results | keyvalue">
<ng-container *ngIf="item.key == 'id' || item.key == 'org'">
<span class="col-6">{{item.value}}</span>
</ng-container>
</div>

you can try this
<div class="form-details">
<div *ngFor="let item of form?.results | keyvalue">
<span class="col-6">{{item.value.id == 'null' ? '' : item.value.id}}</span>
<span class="col-6">{{item.value.org == 'null'? '' : item.value.org}}</span>
</div>
</div>

<div class="form-details">
<div *ngFor="let item of results | keyvalue">
<div *ngIf="item.key == 'id' || item.key == 'org'">
<span class="col-6">{{item.value}}</span>
</div>
</div>
</div>

Try this, you can minimize the code with some thing like this.
<div *ngFor="let item of form?.results | keyvalue">
<ng-container *ngIf="item.key == ('id' || 'org')">
<span class="col-6">{{item.value}}</span>
</ng-container>
</div>

ng-select add new option with async search

I use the [#ng-select/ng-select][1] component many places in my software. It works well, it searches by a backend method as the user types and shows the results for selection.
Now I would like to let the user to create new items that are not on the list. How can I do this with an async list? productNames is an Observable.
<ng-select [name]="'productname'+index$" [items]="productNames | async"
[attr.id]="'productname'+index$"
[(ngModel)]="detail.productNameNew"
[typeahead]="productNameInput"
(change)="productNameChanged($event, detail)"
(keydown)="productNameKeyPress($event, detail)"
[disabled]="currentSuggestion.acceptUser === null ? null : true"
[clearable]="false">
<ng-template ng-label-tmp let-item="item">
{{item.productName}}
</ng-template>
<ng-template ng-option-tmp let-item="item">
<div class="noproduct-item">
<div class="noproduct-head">
<div class="productname">{{item.productName}}</div>
<div class="description">{{item.description}}</div>
</div>
<div class="noproduct-details">
<div class="headid">
<span class='glyphicon glyphicon-send'></span>
{{item.suggestionHeadId}}
</div>
<div class="createduser">
<span class='glyphicon glyphicon-user'></span>
{{item.createUser?.name}}
</div>
<div class="createddate">
<span class='glyphicon glyphicon-calendar'></span>
{{item.createDate | date: 'yyyy.MM.dd.'}}
</div>
</div>
</div>
</ng-template>
</ng-select>

Add a second observable to capture the user added products and then use combineLatest to merge them. Subscribing to the combined list will produce a new list that you can use in the ng-select.
https://stackblitz.com/edit/angular-rxjs-combinelatest

How to add values temporary in md-list-item in angularjs?

I'm trying to add some items in the list using material icon. Here items are adding permanently by ng-click="contactDetails.contactModes.push(numbers);".
I have given 2 buttons on bottom of the card i.e save and discard. but problem is whenever material icon is clicked values get added in the list. Means No use of discard. My aim is to add values temporary on the list so that when ever user click on saved then only values get saved otherwise discarded.
Please suggest
MY CODE:
<md-list-item ng-show="showContactList" class="md-2-line" ng-repeat="numbers in contactList" ng-click="contactDetails.contactModes.push(numbers);">
<i ng-show="numbers.type == 'sample'" class="material-icons md-avatar-icon">textsms</i>
<i ng-show="numbers.type == 'CELL' || numbers.type == 'EXT'" class="material-icons md-avatar-icon">phone</i>
<img class="pad-right-5 md-avatar dime-30" ng-show="numbers.type == 'PAGER'" src="assets/img/contact-pref/pager.png" width="26" style="width:30px;height:28px;margin-left: 5px;">
<div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
<h3> {{ numbers.type }} </h3>
<p> {{ numbers.value }} </p>
</div>
<i class="material-icons md-avatar-icon add-rm-icon margin-right">add</i>
</md-list-item>
Please suggest.

I have used Temporary variable in controller
$scope.arrayText = [{
"type": "sample",
"value": "test"
}];
and made following changes in the code to add temporary and finally using contactDetails.contactModes = arrayText on ng-click added permanently using save button
<md-list-item ng-show="showContactList" class="md-2-line" ng-repeat="numbers in contactList" >
<i ng-show="numbers.type == 'TruliaCare'" class="material-icons md-avatar-icon">textsms</i>
<i ng-show="numbers.type == 'CELL' || numbers.type == 'EXT'" class="material-icons md-avatar-icon">phone</i>
<img class="pad-right-5 md-avatar dime-30" ng-show="numbers.type == 'PAGER'" src="assets/img/contact-pref/pager.png" width="26" style="width:30px;height:28px;margin-left: 5px;">
<div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
<h3> {{ numbers.type }} </h3>
<p> {{ numbers.value }} </p>
</div>
<i class="material-icons md-avatar-icon add-rm-icon margin-right" ng-click="arrayText.push(numbers);">add</i>
</md-list-item>

How to select the right Id when clicked?

I am displaying users in a list with their photo, name etc... and then I am grabbing the value of the element that has the id "uid" :
$scope.toUserView = function() {
var uid = document.getElementById('userUID').textContent;
console.log(uid);
$state.go('tab.userview');
};
Problem is that whoever I click on, I always get the reference of the FIRST user in the list of the page and I would like to grab only the one I click on.
I tried to add .click() at the end of my var but it is not a function.
Any idea ?
EDIT : Corresponding HTML :
<ion-list class="item-border-off list-fav">
<a ><ion-item ng-click="toUserView()" ng-repeat="user in users" class="item-remove-animate item-avatar">
<img ng-src="{{user.photoURL}}">
<h2>
{{user.name}}
</h2>
<p >{{user.description}}</p>
<p id="userUID">{{user.uid}}</p>
<!-- button options -->
<ion-option-button>
<i class="icon ion-ios-trash-outline"></i>
</ion-option-button>
<ion-option-button>
<i class="icon ion-ios-chatbubble-outline"></i>
</ion-option-button>
</ion-item></a>
</ion-list>

Corresponding HTML
<a ><ion-item ng-click="toUserView($index)" ng-repeat="user in users" class="item-remove-animate item-avatar">
<img ng-src="{{user.photoURL}}">
<h2 id={{user.uid}}>
{{user.name}}
</h2>
<p >{{user.description}}</p>
<p id="userUID{{$index}}">{{user.uid}}</p>
<!-- button options -->
<ion-option-button>
<i class="icon ion-ios-trash-outline"></i>
</ion-option-button>
<ion-option-button>
<i class="icon ion-ios-chatbubble-outline"></i>
</ion-option-button>
</ion-item></a>
JS
$scope.toUserView = function(ind) {
var uid = document.getElementById('userUID'+ind).textContent;
console.log(uid);
$state.go('tab.userview');
};

You seem to repeat the <p id="userUID"></p> in a loop.
id attributes should be unique to a page by definition.
document.getElementById('test') returns the first element having the id attribute set to test.
You should either add something unique to your ids, or use class="userUID" instead.

AngularJS filter ng-repeat based on value from scope

I want to display all data (contacts) that have bookmarked value set to 1
To do that I used this peace of code:
<ul class="span5">
<li class="nav-pills nav-stacked contact-row" data-ng-repeat="contact in contacts | orderBy:'firstName'" ng-show="contact.bookmarked('0')">
<span id=" ct-details-{{contact.id}}" data-ng-click="displayContact(contact.id)" style="cursor:pointer;" class="contact-data details-hidden" href="">
<span class="span3 contact-name">
{{contact.firstname + ' ' + contact.lastname}}
</span>
</span>
<button class="btn editContact" id="deleteContact-{{contact.id}}" data-ng-click="deleteContact(contact.id)">Delete</button>
<button class="btn editContact" id="editContact-{{contact.id}}" data-ng-click="editContact(contact.id)">Edit</button>
</li>
</ul>
When I use this code, contacts are not displayed (ones with value 1 and ones with value 0 are not displayed). Does someone knows where's the problem and how to fix it?

You should create a filter on your ngRepeat query.
data-ng-repeat="contact in contacts | filter:{bookmarked:'0'} | orderBy:'firstName'"
Read more about here: https://docs.angularjs.org/api/ng/filter/filter