Question

使用我的AngularJS应用程序，我有一个绑定到模型的select。当用户从列表中选择一个选项时，模型不会更新。当用户再次点击同一选项时，模型会更新。

您可以理解这不是理想的行为。在我的测试中，我将select替换为<input type='text'>，它按预期工作。我的问题在这里是什么？我无法在JSFiddle中复制它，因此我会发布尽可能多的代码，我认为这些代码是相关的。

的index.html

这是我为每种类型的setable poperty获得适当的模板。因此，文字输入获得input type='text'，frequenty获取他的模板，select。

<div ng-repeat="item in propertyList">
    <ng-include src="getTemplate(item, formObject)"></ng-include>
</div>

Controller.coffee

此处返回正确的模板，并设置可选择的频率。

$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

这是问题所在。选择显示选项，但单击选项时，模型不会更新。最奇怪的是formula.html表已更新。这是因为它们绑定了相同的formObject，但模型未更新并且select已清空。当我再次单击相同选项时，select会正确更新模型。

当您使用评论select替换input时，它可以完美运行。但是用户需要选择频率而不是键入它们。

<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>

我希望这很清楚，所以我希望你能帮助我解决这个问题。

Answer 1

你需要为ng-model使用一个点。请在此处查看我的解释和更多详细信息的链接： https://stackoverflow.com/a/30850255/3687474

Angular select不能正确更新模型

的index.html

Controller.coffee

Frequencies.html

Formulas.html

1 个答案: