0

这个例子看起来很简单，我似乎无法弄清楚它为什么不起作用（我不想使用 ng-options，因为它不适用于 select2，这是我得到这个后想使用的插件想通了）：

HTML：

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        selectedNumber: {{selectedNumber}}
        <select ng-model="selectedNumber">
            <option ng-repeat="number in numbers" value="{{number}}">{{number}}</option>
        </select> 
        <div ng-repeat="number in numbers">
            {{number}}
        </div>
    </div>
</div>

AngularJS：

var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope) {
    $scope.numbers = [1, 2];
    $scope.selectedNumber = 2;
});

检查元素时，它看起来像这样：

<select ng-model="selectedNumber" class="ng-pristine ng-valid">
    <option value="? number:2 ?"></option>
            <!-- ngRepeat: number in numbers -->
    <option ng-repeat="number in numbers" value="1" class="ng-scope ng-binding">1</option>
    <option ng-repeat="number in numbers" value="2" class="ng-scope ng-binding">2</option>
</select>

我猜是额外的“ <option value="? number:2 ?"></option>”导致了这个问题，但我不知道如何摆脱它。我还在行动中创建了一个jsfiddle。

4

1 回答 1

1

您看到的原因是因为您的选择绑定到一个不包含在其选项中的项目。尽管您正在通过 ng-repeat 添加选项，但我怀疑该指令将不起作用并且并非旨在以这种方式工作：

这是为什么会出现额外价值的参考。 AngularJS - 在选择标签中使用 ng-repeat 添加了额外的空白选项

我认为您有两个选择： 1. 编写您自己的指令 2. 使用内置指令ng-options并尝试使其与您的插件一起使用

这是一个参考： https ://github.com/angular/angular.js/issues/639 和该问题的一个小提琴：http: //jsfiddle.net/GTynf/3/

这些可能会为您指明解决方案的正确方向。

于 2013-04-25T13:47:08.547 回答