Question

现在选择选择框中的选项会使用所选名称更新输入，这就是我想要的。但是如果在输入字段中键入内容然后在选择框中选择另一个选项，它将停止更新输入。怎么样？

以下是代码：

<div ng-app>
<div ng-controller="TestCtrl">

    <select ng-model="selected" ng-options="box.name for box in selectBoxData">            
    </select>
    <input type="text" name="newSelectValue" value="{{selected.name}}"/>
    <button>Save</button>
</div>

function TestCtrl($scope) 
{

    $scope.selectBoxData = [
        { 'name': 'test1', 'id': 1 },
        { 'name': 'test2', 'id': 2 },
        { 'name': 'test3', 'id': 3 },
    ];

}

http://jsfiddle.net/C8hZN/

Answer 1

当您在输入框的value属性中使用{{selected.name}}时，该值将链接到所选对象，但是一旦您在输入框中键入内容，您就会修改该值以使其断开连接来自对象引用。这就是为什么将来对选择框的修改不再更新文本框的原因。

Answer 2

如果您查看控制台中的value属性，您会看到当选择更改时它仍然可以正确更新。我认为它不显示该值，因为在框中键入的内容优先于属性值。

为了解决这个问题，我在文本框中设置了一个模型，并将所选选项的名称绑定到该文本框。然后，当按下更新时，从输入中设置所选选项的名称。

http://jsfiddle.net/C8hZN/3/

键入输入后选择停止工作的ng-model

2 个答案: