Angular select does not update the model as expected
With my AngularJS app, I have a select
model bound. When the user selects an option from the list, the model is not updated. When users click on the same option again, the model will update.
As you can imagine, this is undesirable behavior. In my test, I replaced select
with <input type='text'>
and it works as expected. What is my problem? I cannot reproduce it in the JSFiddle, so I posted as much code as I think.
Index.html
This I got the correct template for each custom poperty type. Thus, text input gets input type='text'
, and frequenty
gets its template select
.
<div ng-repeat="item in propertyList">
<ng-include src="getTemplate(item, formObject)"></ng-include>
</div>
Controller.coffee
The correct pattern is returned here and the selectable frequencies are set.
$scope.getTemplate = (prop, object) =>
if $builder.widgets.hasOwnProperty prop #Here it found the frequency dropdown template.
return $builder.widgets[prop]
else if angular.isString propValue
return 'templates/widgets/textInput.html'
else if angular.isObject propValue
return 'templates/widgets/formulas.html'
return
$scope.frequencies = [
"NONE"
"DOCUMENT"
"PERIOD"
"COLUMN"
]
Frequencies.html
This is a problem area. The selection displays the options, but clicking this option does not update the model. The strangest thing is that the table has been formula.html
updated. This is because they are bound by the same formObject method, but the model is not updated and the selection is released. When I click the same option again, it select
updates the model correctly.
When you replace with a select
comment input
, it works flawlessly. But the user needs to select frequencies, not enter them.
<div>
<!--<input ng-model="formObject[item]">-->
<select data-ng-model="formObject[item]" data-ng-options="frequency for frequency in frequencies"></select>
</div>
Formulas.html
<div>
<table class="table table-condensed">
<thead>
<tr>
<th scope="row"> </th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,row) in formObject.formulas">
<th>{{key}}</th>
<td ng-repeat="column in row track by $index">
<input type="text" ng-model="row[$index]"/>
</td>
</tr>
</tbody>
</table>
</div>
I hope this is clear enough, so I hope you can help me solve this problem.
source to share
You need to use dot for ng model. Check out my explanation and link to more details here: fooobar.com/questions/2235228 / ...
source to share