Question

我在指令中创建下拉列表如下：

<select ng-model="selectedSite">
    <option value="new">Add New Site</option>
    <option value="line" disabled>------------------------</option>
    <option ng-repeat="site in defaultSites"
            value="{{$index}}">
        {{site.name}}
    </option>
 </select>

指令是：

app.directive('siteForm', function() {
return{
    restrict: 'E',
    replace: true,
    scope: {
        site: '=',        
        defaultSites: '=',
        selectedSite: '=',

    },
    templateUrl: '/views/templates/site_form.html',
    link: function($scope, element, attrs) {

    $scope.$watch('selectedSite', function(newValue, oldValue) {
            console.log('Site selected:', newValue);
            if (newValue !== undefined && newValue !== null) {
                if (newValue !== "new") {
                    var value = $scope.defaultSites[parseInt(newValue)];
                    $scope.site.name = value.name;
                } else {
                    $scope.site.name = "";
                }
            }
        });
    }
};
});

但是当我在selectedSite中提供初始索引时，它不起作用并始终显示第一个选项。例如。如果我们将selectedSite提供为＆＃34; 1＆＃34;然后选择值＆＃34; 1＆＃34;应该被选中哪个没有发生。

其他一切正常，包括$ watch和selectedSite在我从下拉列表中选择选项时会被填充。

我正在使用AngularJS v1.2.10。

Answer 1

尝试以下列方式使用ng-bac

<option ng-repeat="site in defaultSites" value="{{$index}}" ng-selected="{{$index == selectedSite}}">
        {{site.name}}
</option>

Answer 2

尝试在$scope.$apply()处理程序的末尾调用$watch。

请参阅the AngularJS docs on Scope。

选择不会自动更新使用ng-repeat渲染的ng-model更改

2 个答案: