Develop Reference

Angular 2 - How to filter through a select

I'm having trouble with this code which is Angular 2. I have something like this:
<select [(ngModel)]="postoSelecionado" name="postos-disponiveis" id="postos-disponiveis" class="sel-posto" materialize="material_select" [disabled]="!checkboxPostos.checked">
<option *ngFor="let posto of getPostosAtivos" [value]="posto?.cdPt">{{ posto?.cdPt}}—{{ posto?.dsPt }}</option>
</select>
And I want to search through this select. I'm really struggling with this. Can we do something like a search like in the example below?
<option *ngFor="let posto of getPostosAtivos | search:postoSelecionado" [value]="posto?.cdPt">{{ posto?.cdPt}}—{{ posto?.dsPt }}</option>

You can use suitable npm packages matching with your requirement like ng-select: https://www.npmjs.com/package/#ng-select/ng-select for your Requirement
Or you can create your own select option.
Please check this also
How to add a search filter to a select option in angular

Default "placeholder" of Select-box in Angular?

I'm developing a web application (front-end size) using Angular 6.
I have a question: I'm creating a component that contains different select-box, like this:
How can I create a reset() method that changes all the select-box with the placeholder value (without canceling or modifying the options associated with him in any way)?
Is there any way that allows this by modifying the html template programmatically?
Thanks!

you can use ngModel
<select class="custom-select" [(ngModel)]="model.select" name="select" id="combo">
<option value=""></option>
<option *ngFor="let item of list" [ngValue]="item">{{ item}}</option>
</select>
component:
reset(){
model.selct='';
}

runtime binding in Angular 4

Hi I'm new developing Angular application. But, I want to bind a html select element option display in runtime take a look to my code. I'm using TypeScript.
I have this class.
export class Gender{
constructor(short:string, long:string){
this.shortName = short;
this.longName = long;
}
shortName:string;
longName:string;
}
That I'm trying to bind like this
<select class="form-control" [(ngModel)]="selectedOption">
<option *ngFor="let opt of options" [ngValue]="opt">
{{opt."DYNAMICALLY INSERT THE NAME OF THE FIELD TO DISPLAY"}}
</option>
</select>
I want to define in runtime which field will be display. Let's say I want to do something like this
<select class="form-control" [(ngModel)]="selectedOption">
<option *ngFor="let opt of options" [ngValue]="opt">
{{opt.WHICHFIELDTODISPLAY}}
</option>
</select>
so in the valriable WHICHFIELDTODISPLAY is the name of the field I want to display let say "longName".
So, how do I bind a dynamic value in a select option element using Angular 4 with TypeScript?

You can try displaying the value placing within [] instead of dot operator
<option *ngFor="let opt of options" [ngValue]="opt">
{{opt[WHICHFIELDTODISPLAY]}}
</option>

Retrieve angular ng-repeat scope outside ng-repeat

I have a ng-repeat select element, which is formed from the MySQL table, problem is - can't output scope parameter outside of the ng-repeat of the selected option.
What I tried doing:
<select ng-model="rec_name">
<option value=" ">Select</option>
<option ng-selected="{{rec_name == item}}" ng-repeat="item in tasks" value="{{item.name}}">{{item.name}}</option>
</select>
<div>Operator is: {{rec_name}}</div>
Basically, it's almost what I need, but it only shows the value="{{item.name}}" in the Operator div field; which is logically understandable.
Thought, that simply making the equivalence of item and rec_name will allow me to do something like
<div>Operator is: {{rec_name.param}}</div>
Again, what am I trying to do is to output the task.param of currently selected option,formed from tasks, in the isolated from ng-repeat div.
How do I call other item parameters?
Thank you for help.

you can do like this:
<select ng-model="rec_name">
<option value=" ">Select</option>
<option ng-selected="{{rec_name == item}}" ng-repeat="item in tasks" value="{{item.name}}">
<a href="#" ng-click="rec_name == item">
{{item.name}}
</a>
</option>
</select>
<div>Operator is: {{rec_name}}</div>
Cheers:)

You have to manually handle the click event.
Use the following code
HTML
<select class="form-control" ng-model="selecteditem"
ng-options="selecteditem as selecteditem.brand for selecteditem in dropdownval">
</select>
<div>Operator is: {{clicked_rec_name}}</div>
Have the following method in your controller
$scope.getClickedItem=function(item)
{
$scope.clicked_rec_name=item.rec_name;
}
LIVE DEMO

Angularjs include an empty option in html select using ng-repeat - Umbraco back end with Angularjs 1.1.5

As the title says I get an empty option in my HTML when I'm using ng-repeat instead of ng-options. The reason I'm using ng-repeat instead of ng-options is to be able to set a class on every option depending on it's value. I tried using a directive with ng-options but I did not achieve desired result. The problem is not that the default selected value is not set as you can see from the generated HTML. I have a suspicion that the empty option comes from the select ng-model but I'm not sure.
My HTML looks like this:
<select ng-model="selectedProduct.code" ng-init="selectFirstProduct()" ng-change="getArticle()" size="8">
<option ng-selected="{{product.code == selectedProduct.code}}" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product )" value="{{product.code}}">{{product.name}}</option>
</select>
This results in HTML to look like this:
<select ng-model="selectedProduct.code" ng-change="getArticle()" size="8" class="ng-pristine ng-valid">
<option value="? string:200230 ?"></option>
<!-- ngRepeat: product in productsForPriceList -->
<option ng-selected="true" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="200230" class="ng-scope ng-binding" selected="selected">Product 1</option>
<option ng-selected="false" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="300025" class="ng-scope ng-binding">Product 2</option>
<option ng-selected="false" ng-repeat="product in productsForPriceList" ng-class="getClassForProduct(product)" value="300206" class="ng-scope ng-binding">Product 3</option>
I'm using ng-init="selectFirstProduct()" to set selectedProduct.code to the first value in the list. However if I omit this code and set selectedProduct.code when I'm getting the list the result is still the same.
I'm using Umbraco version 7.3.5 back end with Angularjs version 1.1.5.

Initialize selectedProduct.code and it will eliminate the blank option from the list.
Initialize the Object
$scope.selectedProduct = {};
Set A default to the List
$scope.productsForPriceList.YourObjectKey.IsDefault = true;
Add this line code to Controller to initialize your option
$scope.selectedProduct.code = $filter('filter')($scope.productsForPriceList, {IsDefault: true})[0];
You need to add the dependency $filter to the controller