javascript - 选择标签的选定值不会改变angularjs中的外部开关

Question

如果我在 ng-switch 中放置了一个选择标签，那么两种方式的绑定对于 ng-switch 之外的选择标签 ng-model 不起作用。

请参考以下代码

<div ng-switch on="OutputStep">
                <div ng-switch-when="0">
                   Switch Step One
                </div>
                <div ng-switch-when="1">
                     Switch Step Two<br/>
                       <select ng-model="SelectedReviewOption" ng-options="review as review.DisplayValue for review in ReviewOptions">
                       </select>
                       Selected Value : {{SelectedReviewOption.DisplayValue}}             
                </div>                        
</div>
<button ng-click="OutputStep = '0'" ng-disabled="OutputStep == '0'">
Back
</button>
<button ng-click="OutputStep = '1'" ng-disabled="OutputStep == '1'">
Next
</button>
Selected Value Outside Switch : {{SelectedReviewOption.DisplayValue}}

在这个小提琴中，单击下一步按钮查看第二个切换页面。更改选择标签中的值。观察改变的值不能显示在开关之外——

Answer 1

有一个 '。' 在您的模型中将确保原型继承发挥作用。所以，使用

<input type="text" ng-model="someObj.prop1"> rather than 
<input type="text" ng-model="prop1">

工作小提琴

理解范围

Answer 2

在 ng model 中使用 $parent.var_name ，因为 ng switch 创建它单独的范围，如果变量没有在范围之外由 ng-init 或其他东西（在控制器中）显式定义，则该变量将被限制在该范围内

Answer 3

现在是 .. 您需要使用 $parent 进入父范围，在 switch 块之外

$parent.SelectedReviewOption

http://jsfiddle.net/cobc0u3p/6/