Question

这个例子看起来很简单，我似乎无法弄清楚为什么它不起作用（我不想使用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。

Answer 1

您看到的原因是因为您的选择绑定到其选项中未包含的项目。虽然您是通过ng-repeat添加选项，但我怀疑该指令不起作用，并且不能以这种方式工作：

以下是为什么会出现额外价值的参考。 AngularJS - extra blank option added using ng-repeat in select tag

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

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

这些可能会为您提供正确的解决方案。

AngularJS select指令不使用选项

1 个答案: