I have following code to use vaadin combo box in polymer 3, but itis not working.
<vaadin-combo-box id ="select" placeholder="Please select">
<template is="dom-repeat" items="{{items}}" as="item">
<option value$="{{item.id}}"> {{item.type}}</option>
</vaadin-combo-box>
I understand, it has to do with and , else if I just use exact values in items, it works
You should not use template with dom-repeat. There is internal logic that populates the popup with vaadin-item's based on items property (note, it does not use option), so it should be enough if you do
<vaadin-combo-box
label="Type"
placeholder="Please select"
item-label-path="type"
item-value-path="id"
items="{{this.items}}"
></vaadin-combo-box>
Related
This is my page when I click on Edit the dropdown is not selected with value in the dropdown list ... Image
In edit mode i got like this ... Image
Dropdown shown with values... Image
I need like this ... Image
Here is my angular code:
<select class="form-control form-control-sm form-control-Cutom-height" id="dropdown" style="height: 38px;" ng-model="suppliment.PurchaseTypeId">
<option ng-repeat="Supple in PTSupplement" ng-selected="{{ Supple.PurchaseTypeId == suppliment.PurchaseTypeId }}" value="{{Supple.PurchaseTypeId}}" >
{{Supple.PurchaseType}}
</option>
</select>
Please help me :)
It appears as if when you display the dropdown, the your value is not be populated as the selected value properly. When using <select> in AngularJS, you can specify the ng-options attribute and use that to generate all of the <option> fields for you without doing the ng-repeat that you're doing.
From the AngularJS docs regarding the use of ngSelected:
Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.
Instead use the following:
<select
class="form-control form-control-sm form-control-Cutom-height"
id="dropdown"
style="height: 38px;"
ng-model="suppliment.PurchaseTypeId"
ng-options="Supple.PurchaseTypeId as Supple.PurchaseType for Supple in PTSupplement">
</select>
I have a grid and need to implement a conditional editor template: if certain condition of the row is true, show a select dropdown, if not, show the regular text input. My template is this:
<div><form name="inputForm">
<select ng-show="row.entity.name == 'some_name'" ui-grid-edit-dropdown
ng-model="MODEL_COL_FIELD">
<option value="true">true</option>
<option value="false">false</option>
</select>
<input ng-show="row.entity.name != 'some_name'" ng-class="'colt' + col.uid"
type="text" ui-grid-editor ng-model="MODEL_COL_FIELD">
</form></div>
But it's not working ok...the dropdown show ok, but the text inputs don't appear when double clicking the field.
However...if I remove the ui-grid-edit-dropdown attribute of the select element, every control show ok, but now the select edit control doesn't disappear when I click somewhere else, as this is supposed to work.
Any ideas?
I have seen few answers which were working for ng-repeat, but with ng-options I am facing issue.
Problem : Want to show the error message required if the dropdown is touched and nothing is selected, I am able to do this with input fields.
JS CODE
$scope.personMap = [{ name:"Abc", id:"a"},
{ name:"XYZ", id:"b"},
{ name:"FGH", id:"c"},
{ name:"TY", id:"d"}
}]
HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="" selected hidden/> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
Referred this ng-repeat solution
As there is no answer yet, I am posting the issue i found out.
So when i use ng-options it starts adding one extra row in the dropdown which can be blank or you can give something like select me.
I added the below code to fix that and in chrome it does not show any blank row.
<option value="" selected hidden/> </select>
But when i try in IE it still have a blank row, So what happens is when I select one value in dropdown and then click back on the blank row the ngMessage works fine.So if i add one more blank option in chrome and then try to select something first and then click on blank the ngMessage work as expected.
Issue is
I was expecting <select> to work like the input fields and was trying to use the$touched` state. But it does not work like that, I was thinking as soon as i click on the dropdown ngMessage should get active if i leave the focus to other field without selecting anything from dropdown. Not sure if I can make it possible through any other way.
Updated HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="">Select one </option> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
I have to develop a configuration screen where I have to fetch a set of key pair values from db and show in the UI to update the configuration. Here, when the value is 'TRUE' or 'FALSE', I have to show the input control as checkbox and for the rest of the values, I have to show the input control as textbox. I have used ng-repeat for single input control. But here I need to show two input controls (checkbox / textbox) based on the value. Can you please give me an idea on how to use ng-repeat to implement with multiple input controls ?
How about something like this:
<div ng-repeat="item in items"
ng-init="item.showCb = item.value == 'TRUE' || item.value == 'FALSE'">
<input type="checkbox"
ng-if="item.showCb" />
<input type="text"
ng-if="!item.showCb" />
</div>
JSFIDDLE
Following is my code snippet. I want to validate my select box using angular.
<form name="myForm">
<select name="category_1" ng-model="catid" id="category_1" ng-options="category.catid for catid in categories" required>
<option value="" selected=""></option>
<option value="1">music</option>
<option value="2">internet</option>
</select>
<button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button>
</form>
but can not submit the form I got this error in chrome,,and submit button is not working
An invalid form control with name='category_0' is not focusable.
here is the plunker
The problem is not the select box, maybe the problem is that you have another select box (with name category_0) or other input field (with name category_0), which has the required attribute and it is hidden or is not visible.
So when you try to submit your form, it tries to focus it, but is not possible. Make sure that the element with name category_0 is not inside an ng-hide block, or inside an ng-show with a false condition.