UPDATED
Creating user input popup form, in one field trying to do autocomplete, with THIS solution.
I guess the auto-complete is working fairly fine, the issue is the options not coming below the input box.
Code:
<div>
<div class="modal-header">
</div>
<div class="modal-body">
<form novalidate [formGroup]="myform">
<div class="form-floating form-group">
<input type="text" class="form-control" id="fltName" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<label for="fltName">Name</label>
<mat-autocomplete autoActiveFirstOption #emp="matAutocomplete" class="form-control">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option}}
</mat-option>
<mat-autocomplete>
</div>
Question:
1. The options box should display, only if there 2 or less matches?
2. return emp names options by inserting emp_id?
How can I setup option such as {name:xyz, emp_id:123, emp_no:333}, and if I text any value should give name as option like if I write 33 should bring option xyz.
Question 1: The options box should display, only if there 2 or less matches
For this you need to apply the ng-container (To avoid rendering the option box) directive and apply the length condition over there according to your requirement.
<mat-autocomplete #auto="matAutocomplete">
<ng-container *ngIf="filteredOptions && (filteredOptions | async)?.length <= 2">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option" >
{{option.name}} //this is the value you always want to display
</mat-option>
</ng-container>
</mat-autocomplete>
Question 2: return emp names options by inserting emp_id?
The second part can be achieved by applying filter on the required fields, i.e.
private _filter(value: string): string[] {
if(value && value !== ""){
const filterValue = value.toLowerCase();
return this.options.filter(option => option.name.toLowerCase().includes(filterValue) || option.emp_no.toString().startsWith(filterValue));
} else {
return [];
}
}
apart from this you need to fix the pipe part as well, you have to pass the control value in RxJs startWith operator like,
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(this.myControl.value),
map(value => this._filter(value))
);
Note: you can access the working solution here
I am stuck trying to simplify the user inputs by automatically populating the input value based on the above selection box in a model.
Context:
I am trying to populate the account payments by using standard items.
In my DB I have the following:
item | value
item 1 | Value 1
item 2 | Value 2
item 3 | value 3
I would have the following in my modal code
<div class="modal-body">
<label class="label-control">Membership Number:</label>
<div class="input-group">
<input type = "text" class = "form-control" name = "membership" value="">
</div>
<label class="label-control">Rank:</label>
<div class="input-group">
<select type="text" class="selectpicker" data-sytle="select-with-transition" name="item" data-size="6">
#foreach ($payments as $p)
<option value ={{$p->item}}>{{$p->item}}</option>
#endforeach
</select>
</div>
<label class="label-control">Amount</label>
<div class="input-group">
<input type="text" class="form-control" name = "amount" value="xxxx">
</div>
I would like to populate the value="xxxx" based is what selected in the item drop down.
So if Item 3 is selected from the drop down, the value 3 is populated in the value field.
I understand that I require an onchange javascript, but I am a little lost.
Saving this to the DB will not be an issue, just the javascript to update the value field is where I get stuck
Give an ID "selectBox" to selectbox And "textField" to the text box. By using Jquery then you can populate its value.
$(document).on('change', 'select#selectBox', function(){
$('#textField').val();
});
Also make small change in your loop, add quotes " " to value.
#foreach ($payments as $p)
<option value ="{{$p->item}}">{{$p->item}}</option>
#endforeach
I want editable-ui-select inside form tag. But it is not working inside form element.
Here is my code
<form class="col-xs-12 form-horizontal"
editable-form role="form" name="uiTest">
<div ng-click="uiTest.$show()" onaftersave="ctrl.onTypeSelect(ctrl.selectedType)"
editable-ui-select="ctrl.selectedType"
buttons="no"
e-clickable="true"
blur="submit"
data-e-name="type"
name="type"
theme="bootstrap"
data-e-ng-model="ctrl.selectedType" >
{{ctrl.selectedType.key}}
<editable-ui-select-match allow-clear="true" placeholder="Search {{ctrl.label}} by Name">
{{$select.selected.name}}
</editable-ui-select-match>
<editable-ui-select-choices repeat="item in ctrl.filteredItems = (ctrl.types | filter : {name : $select.search})">
<div ng-bind-html="item.name | highlight: $select.search"></div>
</editable-ui-select-choices>
</div>
</form>
I want it without the use of buttons. So I have added buttons="no". When I run this, the ui-select opens, i can select item from drop down, but on select of item, it doesn't changes back to view mode.
EDITED
I have added a jsfiddle link.
I am generating dropdown at runtime using AngularJs. I also want to bind corresponding options with it which will be generated based on dropdown type being created.
<div class="form-group" ng-repeat="attrib in col1Attribs">
<label class="control-label" for="txtCode">{{attrib.displayText}}</label>
<select class="form-control"
ng-options="item.configValue for item in configOptions(attrib.configType)" />
</div>
My controller has following method.
$scope.configOptions = function (type){
return SmartCache.get(type); //SmartCache is my cacheFactory
}
EDIT:
Here is my data when parameter type = 'Status'
[{"$id":"1","people":[],"configId":"STAT001","configValue":"Active","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Active","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHM=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"2","people":[],"configId":"STAT002","configValue":"Suspended","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Suspended","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHQ=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"3","people":[],"configId":"STAT003","configValue":"Terminated","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Terminated","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHU=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"4","people":[],"configId":"STAT004","configValue":"Deleted","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Deleted","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHY=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]}]
I am able to achieve my task using code below but not using ngOptions.
<div class="form-group" ng-repeat="attrib in col1Attribs">
<label class="control-label" for="txtCode">{{attrib.displayText}}</label>
<select class="form-control">
<option ng-repeat="c in configOptions(attrib.configType)" value="{{c.configId}}">
{{c.configValue}}</option>
</div>
</div>
Try this jsFiddle
I can't see the rest of your code. Here is a snippet of how to create the dropdown:
<select data-ng-options="e.description for e in configOptions" data-ng-model="selectedOption" />
Demo:http://plnkr.co/edit/YcuqZ1gs4iDAAgfLrZPO?p=preview
Probably you are trying this
Use as
<select class="form-control"
ng-options="item.configId as item.configValue for item in configOptions(attrib.configType)" />
configId adds as option value and configValue as display value.
I'm having an issue with the select tag's title not changing when a new value is selected. I have another div which only appears when a certain value is chosen from the select.
register.html
<label class="item item-input item-select">
<span class="input-label">
</span>
<select name="idselect" ng-model="data.idType" class="pretty-select">
<option value="">
{{ "select-id-type" | translate }}
</option>
<option
ng-repeat = "idType in idTypes"
value = "{{ idType.shortcode }}">
{{ idType.name }}
</option>
</select></label>
A little later in the code...
<label
class = "item item-input item-stacked-label inherit-bgc"
ng-show = "data.idType === 'passport'">
<span class="input-label">
{{ "expiration-date" | translate }}
</span>
<input type="date" ng-model="data.idExpiry" name="expirydate"></label>
config.js
config.idTypes = {
1: {
name: "ID Card",
shortcode: "idcard"
},
2: {
name: "Passport",
shortcode: "passport"
}
};
It DOES hide and show the expiration date input correctly (ie when "passport" is the selected value). What it does not do is have the word "Passport" show up in the selector when selected, unless you select Passport --> ID --> Passport --> ID --> Passport in that order (and exactly 3 times), or change the focus to the input element.
Any ideas? I already tried using $watch and a global variable, and while it also shows and hides the input, the selector still isn't updating.