2013-04-25 118 views
0

这个例子似乎很简单,我似乎无法弄清楚为什么它不工作(我不想使用ng选项,因为这不适用于select2,插件我想一旦我得到这个想通了使用):AngularJS选择指令不与选项

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这一行动。

+0

你指的是多余的“”? – lucuma 2013-04-25 13:13:12

+0

我忘了把代码块放在一个:)。我只是修复它。 – testing123 2013-04-25 13:32:36

回答

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/

这些可能会指出你在一个解决方案的正确方向。