Question

我有这个AngularJS代码

var app = angular.module('testApp', []);
app.controller('testController', function ($scope) {

    $scope.MyTypes = [
      { name: 'Option1', value: 100 },
      { name: 'Option2', value: 101 },
      { name: 'Other', value: 102 }
    ];

    $scope.SelectedType = $scope.MyTypes[0];
    $scope.SelectedValue = $scope.MyTypes[0].value;

    $scope.onChange = function () {
        $scope.SelectedValue = $scope.SelectedType.value;
    }

});

使用此HTML

<div ng-app="testApp">
    <div ng-controller="testController">    
        <select ng-model="SelectedType" ng-options="ft.name for ft in MyTypes" ng-change="onChange()"></select>
        <input type="text" value="{{SelectedValue}}"/>
    </div>
</div>

这将显示输入框中的值，该值取自从列表中选择项目时选择列表中的所选项目。此代码正常工作，直到用户在输入文本框中键入内容，然后绑定将丢失并且文本框值不会更新。

这是AngularJS中的正常行为吗？如何解决这个问题并使其正常工作（即使在用户输入内容后，即使在用户输入内容后，也可以选择输入的文本和选择列表中的值）？

Demo Fiddle

Answer 1

要获得所需的效果，您应该使用ng-model将输入绑定到SelectedValue，而不是在value属性中使用插值：

<input type='text' ng-model='SelectedValue' />

您所看到的行为的关键是输入上的value属性是控件的初始值而不是输入值。

只要在输入字段中输入文本，value属性中的任何内容都不再相关。 value属性将包含新值，但不会影响控件中的值（在DOM检查器中查看）。

Answer 2

这不是正常行为，您需要绑定文本框。你只是在你的文本框中设置值，但没有像这样绑定

<input type="text" ng-model="SelectedValue" value="{{SelectedValue}}"/>

以下是更新后的代码。enter link description here

Demo Fiddle

当用户在输入文本框中键入内容时，单向绑定丢失

2 个答案: