In this recipe, we will show you how to bind a selected value from a <select>
tag to a variable; so in effect, we now perform data binding from the UI to the code and have two-way data binding. We show a list of companies. You can find the code in the project pol_select
.
webindex.html
, where a component with the name pol-select
is imported through the following line:<link rel="import"href="pol_select.html">
From this, we know that the component is defined in pol_select.html
, and the code behind it is in a file named pol_select.dart
. For a discussion of the other tags, see the first recipe.
pol-select
is defined in pol_select.dart
:import'package:polymer/polymer.dart'; @CustomTag('pol-select') classPolselect extends PolymerElement { final List companies = toObservable(['Google', 'Apple', 'Mozilla', 'Facebook']); @observable int selected = 2; // Make sure this is not null; // set it to the default selection index. @observable String value = 'Mozilla'; Polselect.created() : super.created(); }
pol_select.html
:<link rel="import"href="packages/polymer/polymer.html"> <polymer-element name="pol-select"> <template> <select selectedIndex="{{selected}}" value="{{value}}"> <option template repeat="{{comp in companies}}"> {{comp}} </option> </select> <div> You selected company {{selected}} <br/> or from index: {{companies[selected]}} <br/> or from binding: {{value}} </div> </template> <script type="application/dart" src="pol_select.dart"></script> </polymer-element>
The following screenshot is what you see when you run the app:
Step 2 defines the list of companies to be shown. It also declares an index to be selected in List
and value
as a variable. Step 3 shows that to populate a <select>
tag, the repeating template from the Binding and repeating over a list recipe in this chapter can be used. It also shows that the selectedIndex
attribute is set from the code. When another company is selected, this also changes the values of selected
and value
.