I have ui-select element used with help angular-formly field type. I have defintion like this:
<ui-select ng-model="model[options.key]" theme="bootstrap" ng-required="{{to.required}}" ng-disabled="{{to.disabled}}" reset-search-input="false">,
<ui-select-match placeholder="{{to.placeholder}}">,
{{$select.selected[to.labelProp || \name\]}},
</ui-select-match>,
<ui-select-choices group-by="to.groupBy" repeat="option[to.valueProp || \value\] as option in to.options | filter: $select.search">,
<div ng-bind-html="option[to.labelProp || \name\] | highlight: $select.search"></div>,
</ui-select-choices>,
</ui-select>
I am looking for a way to turn off filtering, turning off type ahead option, so this element would act more like regular select with its look.
Also when feed with value - via model - when clicked to expand selection on list become not in synch with value - it is selecting first value on list instead value driven by model - when "clicked away" goes to normal. Is it a setting for it ?
Use UI Bootstrap Typeahead feature. Hope it is lightweight and easy.
<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
<h4>Static arrays</h4>
<pre>Model: {{selected | json}}</pre>
<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
</div>
In your controller, have a states array.
Related
I am using Angular material autocomplete and I am trying to select value using #Input and form control. Almost everything is working fine. I am setting value using input like this:
#Input() set startingPointValue(value) {
this.control.setValue(value, { emitEvent: false });
this.resizeInput();
}
And the value of the input is properly set but when I open autocomplete, an option which should be selected don't have mat-selected class so basically there is no indication which option was selected and this is confusing. When I click same option again class is added.
Is there a way to do that using setValue or I need to use something else?
This is my autocomplete HTML:
<mat-form-field class="starting-point-filter-container">
<mat-label>{{ label }}</mat-label>
<input
id="inputStartingPoint"
#startingPointInput
matInput
placeholder="Type to filter results"
type="text"
[formControl]="control"
[matAutocomplete]="startingPointAutocomplete"
spellcheck="false"
/>
<mat-icon class="starting-point-icon--dropdown">arrow_drop_down</mat-icon>
</mat-form-field>
<mat-autocomplete
#startingPointAutocomplete="matAutocomplete"
[displayWith]="displayName"
(opened)="scrollToSelected()"
>
<perfect-scrollbar class="select-scrollbar" [config]="scrollBarConfig" #scrollFilterContainer>
<mat-optgroup
*ngFor="let group of groups"
[label]="group.name"
[class.mat-optgroup-no-label]="!group.name"
class="starting-point-group-container"
#scrollToContainer
>
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.id }}
</mat-option>
</mat-optgroup>
</perfect-scrollbar>
</mat-autocomplete>
Any help will be appreciated
Edit:
I created StackBlitz with autocomplete: https://stackblitz.com/edit/angular-ivy-mqwwky. You can inspect option number 2 after init. There is no class .mat-selected on it. You need to click it manually to set it properly. Question is how to do that during init?
Generally i have an object of objects -> filteredDrivers.
Single object looks like this:
DRIVER_ID: 99
DRIVER_NAME: "JOHN SNOW"
which i'm using in md-autocomplete:
<md-input-container>
<input type="text"
name="driver"
mdInput
[mdAutocomplete]="auto"
placeholder="Driver"
ngModel
>
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let driver of filteredDrivers| async" [value]="driver"
ngDefaultControl>
{{ driver.DRIVER_NAME}}
</md-option>
</md-autocomplete>
And i want to pass whole object by submitting a form but in input i want to view just driver.DRIVER_NAME.
If i pass whole driver like [value]="driver" in input i see [object Object]
and form submit gives me full object
but when i go with [value]="driver.DRIVER_NAME" i can see what i want - JOHN SNOW but form submit gives me only driver.DRIVER_NAME
How can i pass whole object by submitting the form and see only driver.DRIVER_NAME property in input?
It's clearly documented in the Angular Material docs for
Autocomplete.
Specifically:
Setting separate control and display values
If you want the option's control value (what is saved in the form) to
be different than the option's display value (what is displayed in the
actual text field), you'll need to set the displayWith property on
your autocomplete element. A common use case for this might be if you
want to save your data as an object, but display just one of the
option's string properties.
To make this work, create a function on your component class that maps
the control value to the desired display value. Then bind it to the
autocomplete's displayWith property.
<md-input-container>
<input type="text" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
<md-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.name }}
</md-option>
</md-autocomplete>
The problem that i am facing is as follows: If i were to select a particular tag/author from the Tags/Author dropdown, the results are getting narrowed down as expected; however, when i click the 'Clear' button, the content disappears. I have to refresh the page for all the results to be displayed again.
I have another application using the same logic and in that clicing the 'Clear' button does not lead to the results disappearing. So i'm a bit concerned as to why it's working in one instance and not in the other.
I'd appreciate if you can help me understand where i'm going wrong here.
The foll is a part of my filter logic:
<md-input-container>
<label>Enter Search Term</label>
<input type="text" ng-model="classifiedsFilter">
</md-input-container>
<md-input-container>
<label>Tags</label>
<md-select ng-model="tag">
<md-option ng-repeat="tag in tags | orderBy: 'toString()'" value="{{ tag }}"> <!-- tags here refers to a newly defined array that stores only one instance of all the tags against the 'tags' property on each object/word -->
{{ tag }}
</md-option>
</md-select>
</md-input-container>
The foll are my filters on md-card:
<md-card ng-repeat="classified in classifieds | filter: classifiedsFilter | filter: tag:true | filter: expression | filter: book:true | filter: author:true | orderBy: order" flex-xs="100" flex-sm="40" flex-gt-sm="30" class="classified">
I have created a typeahead using the angular-ui library.
My current typeahead html is:
<input name="customers" id="customers" type="text" placeholder="enter a customer" ng-model="selectedCustomer" uib-typeahead="customer.firstName for customer in customers | filter: $viewValue | limitTo:8" class="form-control" typeahead-editable="false">
Basically the typeahead search works ok but when i select the type ahead i want to retrieve all the fields which are attached to the customer record such as surname , address etc. The typeahead gets populated into property called $scope.customers in my controller which is done via an ajax call to the api to get all customers.
So on selection how can i get all the fields related to the selected customer?
Cheers
Change the uib-typeahead attribute:
<input name="customers" id="customers" type="text" placeholder="enter a customer" ng-model="selectedCustomer" uib-typeahead="customer as customer.firstName for customer in customers | filter: $viewValue | limitTo:8" class="form-control" typeahead-editable="false">
This will set the selected customer to the ng-model selectedCustomer.
I have the following requirement,
I have an array as customers (values such as cust1,cust2,cust3).
I have textbox, in which when I enter some values it will filter the customers arraylist and displays my result (For example : if i enter cust1 in textbox, it will display cust1)
If the value entered in textbox not in the arraylist (customers), i want to change textbox colour to red.
Could anyone guide to do this.
My approach
<div class="container">
<h2>View 1</h2>
Name:
<br />
<input type="text" ng-model="filter.name" /> -- I want to change this textbox colour
<br/>
<ul>
<li ng-repeat="cust in customers | filter : filter.name | orderBy:name">{{cust.name}} {{cust.city}}</li>
</ul>
<br/>
The solution for this is rather simple.
First, you need to modify your ng-repeat in the following way:
ng-repeat="cust in customers | filter : filter.name | orderBy:name as filteredCustomers"
Notice the as filteredCustomers in the end. This saves the resulting filter to $scope.filteredCustomers.
Then, you just have to modify your input to use a conditional CSS class:
<input type="text" ng-model="filter.name" data-ng-class="{'red': filteredCustomers.length === 0}" />
Also you will have to define the .red CSS class with background-color: red; or something similar.
Proof of concept: http://jsbin.com/diyehagemo/2/