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">&nbsp;</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.

+3


source to share


1 answer


You need to use dot for ng model. Check out my explanation and link to more details here: fooobar.com/questions/2235228 / ...



0


source







All Articles