ng-model在輸入輸入後選擇停止工作

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屬性，你會看到，它仍然正確更新時選擇變化。我認爲它不會顯示該值，因爲輸入框中的任何內容都優先於屬性值。

爲了解決這個問題，我會在文本框中設置一個模型並將選定的選項名稱綁定到該模型上。然後當按下更新時，從輸入中設置選定的選項名稱。

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

Answer 2

當你在輸入框的值屬性使用{{selected.name}}，該值被鏈接到所選擇的對象，但一旦你輸入到輸入框中，修改該值以便它與對象引用斷開連接。這就是爲什麼對選擇框的未來修改不再更新文本框。