AngularJS下拉选框ng-model无法同步选中值至$scope问题咨询

问题原因 #

这是AngularJS 1.x原型继承机制引发的典型问题：

• 当ng-model绑定**原始类型（字符串、数字、布尔值）**时，如果当前DOM元素处于父作用域的子作用域中（比如嵌套ng-controller、ng-repeat等指令自动生成的子作用域），子作用域会创建一个与父作用域同名的「影子属性」。
• 页面插值{{selTestName}}和下拉框绑定的是子作用域的selTestName，所以能同步更新；但点击按钮触发的test()函数属于父作用域，它访问的是父作用域中未被修改的初始selTestName，因此始终显示初始值。

解决方法 #

方法1：用对象包裹原始属性（推荐） #

利用引用类型的特性，将绑定属性放入对象中，子作用域会直接修改父作用域对象的属性，不会生成影子属性。

改造后的JavaScript代码：

$scope.testData = {
    testNames: ['ABC', 'DEF', 'GHI'],
    selTestName: $scope.testNames[0]
};
$scope.test = function(){
    $log.debug('selTestName=' + $scope.testData.selTestName);
}

改造后的JSP代码：

<td colspan="3" class="input-medium">
    <select class="span2" ng-model="testData.selTestName" style="font-family: verdana;"
        ng-options="testName for testName in testData.testNames">
    </select>
</td>
{{testData.selTestName}}
<td>
    <button type="button" class="btn btn-small btn-info" ng-click="test()">Test selTestName</button>                    
</td>

方法2：通过$parent指定父作用域属性 #

在ng-model中直接用$parent引用父作用域的属性，避免子作用域创建影子属性。

修改JSP中的下拉框代码：

<select class="span2" ng-model="$parent.selTestName" style="font-family: verdana;"
    ng-options="testName for testName in testNames">
</select>

注意：该方式仅适用于简单作用域场景，复杂页面中使用会增加代码耦合度，不利于维护。

内容的提问来源于stack exchange，提问作者user1169587