4

我正在尝试使用 AngularJS 提供一个可切换的下拉列表，其中各种选项的选择将触发不同的列表。ng-switch似乎是正确的方法，但我ng-model在ng-switch. 如果我不使用ng-switch，绑定可以正常工作，但如果是这种情况，我不知道如何切换我的下拉列表。这里可能是什么问题？

jsFiddle：http: //jsfiddle.net/tanweihao88/LUzXT/3/

HTML：

<select ng-model="periodRangeModel" ng-options="item for item in items"></select>
<div ng-switch on="periodRangeModel">
    <span ng-switch-when="Month"><period-selector items="monthOptions" ng-model="periodModel"></period-selector></span>
    <span ng-switch-when="Quarter"><period-selector items="quarterOptions" ng-model="periodModel"></period-selector></span>
    <br>
</div>

JS：

angular.module('myApp', [])
.controller("MyCtrl", function($scope) {
    $scope.items = ['Month', 'Quarter'];
    $scope.periodRangeModel = "Month";
    $scope.quarterOptions = ["Jan-Mar", "Apr-Jun", "Jul-Sept", "Oct-Dec"];
    $scope.monthOptions = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    $scope.periodModel = $scope.monthOptions[0];
})
.directive('periodSelector', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: { items: '=', ngModel: '='},
        template: "<span><select ng-options='period for period in items' ng-model='ngModel'></select></span>"
    }
});
4

1 回答 1

6

绑定无法按预期工作的主要原因是ng-switch创建了一个新范围，并且当绑定到字符串原语时，原始periodModel范围没有按照您的预期进行更新（因为periodModel正在更新新范围）。

这个问题有更多关于幕后发生的事情的详细信息，您可以查看Angular Batarang Chrome 扩展程序以直观地查看各种作用域。

您可以通过绑定到这个更新的 fiddle中的对象值来解决它。主要变化是：

1）更改periodModel为一个对象并设置一个属性（在这个例子中它被称为value）

$scope.periodModel = {
    value: $scope.monthOptions[0]
};

2）将任何绑定代码更改为访问periodModel.value而不是periodModel

<period-selector items="monthOptions" ng-model="periodModel.value"></period-selector>

Model: {{periodModel.value}} (this is supposed to change)
于 2013-06-04T03:35:48.383 回答