Menu
I have a problem with ng-model on a select element when passing an object from option elements. So, imagine we have an array of columns from a table called columns (the table's definition) and we'd like to creat some filters upon this definition
var columns = [
{name: 'Account ID', type: 'numeric'},
{name: 'Full name', type: 'text'},
{name: 'Date of birth', type: 'date'},
{name: 'Active', type: 'boolean'}
// and so on
];
var filters = [{}];
HTML:
<div class="form-field" ng-repeat="filter in filters">
<select ng-model="filter">
<option value="" disabled>Choose filter</option>
<option ng-repeat="column in columns" ng-value="column">{{column.name}}</option>
</select>
<input type="text" ng-model="filter.value">
</div>
As you can see, I'd like that filter to get the value of column and to add specific data in it, so at a certain moment, my filter could be like:
[
{name: 'Account ID', type: 'numeric', value: 123},
{name: 'Active', type: 'boolean', value: 'Yes'}
]
Anyway, I'm not sure this is the way of doing this, but I'd like to know how can I achieve this behavior, withour writing to much js code in the controller.
I did some workaround to get this done using ng-change, passing the filter and the column.name, find the column in the columns array, get the type property, update the filter, but I really think that there is a simpler answer to this.
294
Overview. HTML select element with AngularJS data-binding. The select directive is used together with ngModel to provide data-binding between the scope and the <select> control (including setting default values). It also handles dynamic <option> elements, which can be added using the ngRepeat or ngOptions directives.
The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.
In AngularJS when you are using ng-options, you can filter out the options by calling a custom function you have in the controller. Let's say you have following set of employees and when you display all these employees inside HTML select using ng-options, you can see all the employees in a dropdown.
Use the ngModel selector to activate it. It accepts a domain model as an optional Input . If you have a one-way binding to ngModel with [] syntax, changing the domain model's value in the component class sets the value in the view.
You can use ng-options to bind the selected object to a model:
<div class="form-field" ng-repeat="filter in filters">
<select ng-options="column.name for column in columns" ng-model="filter.value">
<option value="" disabled>Choose filter</option>
</select>
<input type="text" ng-model="filter.value.name">
</div>
Plunker
Updated answer:
<div class="form-field" ng-repeat="filter in filters">
<select ng-options="column.name for column in columns" ng-model="filters[$index]">
<option value="" disabled>Choose filter</option>
</select>
<input type="text" ng-model="filters[$index].name">
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
