2013-04-25 114 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/

這些可能會指出你在一個解決方案的正確方向。