AngularJS ngOption mit Array

Question

Ich mag eine HTML hinzufügen auswählen, mit Optionen AM, PM mit AngularJS, , was ich brauche den Schlüssel und den Wert der Option gleich sein wird mit:

<option value="AM">AM</option> 
<option value="PM">PM</option> 

Mein html Aussehen wie diese

<select ng-model="ampm" ng-options="k as v for (k , v) in ampms"></select> 

und mein Controller sieht aus wie

$scope.ampm = (new Date().getHours()) >= 12 ? 'PM' : 'AM'; 
    $scope.ampms ={"AM":"AM","PM":"PM"}; 

und alles, was Arbeit in Ordnung.

Meine Frage ist, warum ich kann nicht die gleiche Sache, wenn ich ein Array verwendet (i alle versucht, die Optionen in den ng-Optionen) als diese

$scope.ampms =["AM","PM"]; 

was immer ich bekomme ich immer diesen

Was ich will ist mit einem Array wie oben mit der Option hat der Schlüssel und der Wert die gleiche.

Answer 1

Dies ist ein Standardverhalten von ng-Optionen in Angular. Wenn Sie keinen Schlüsselnamen angeben, wählt angular automatisch den Index anstelle eines Schlüssels. Der Code, der das tut, kann auf line 405 in /src/ng/directives/select.js on Angular's Github repository gesehen werden.

Er kann nicht einmal durch "Wert als Wert für (Index, Wert) in Werten" erzwungen werden.

Aber wie dnc253 schlug mich einfach mit seiner Antwort (es zeigte sich, während ich tippte) ... Sie müssen sich keine Sorgen machen, Angular macht alles automatisch für Sie.

Answer 2

Mit AngularJS müssen Sie sich keine Gedanken über den Wert der Option machen. Alle Selektionen, die ich mit ng-options gesehen habe, haben Werte von 0 bis einschließlich. Wenn du gerade erst für ein Drop-Down mit den beiden Optionen suchen, kann es so einfach sein wie

<select ng-model="ampm" ng-options="currOption for currOption in ['AM', 'PM']"></select> 

Siehe http://jsfiddle.net/EyBVN/1/

Answer 3

Ich habe eine Möglichkeit gefunden, bestimmte Daten in den Wert der Optionen für eine Auswahl zu platzieren. Sie haben ein ng-repeat-Attribut auf den Option-Tag in dem select-Tag hinzuzufügen:

<select id="{{question.id}}" name="{{question.id}}" 
    class="{{question.inputclass}}" ng-required="question.required" 
    title="{{question.title}}"> 
    <option value=""></option> 
    <optgroup ng-repeat="group in question.data" label="{{group.group}}"> 
    <option ng-repeat="item in group.data" value="{{item.value}}" 
     ng-selected="{{item.value == question.defaultValue}}"> 
      {{item.description}} 
    </option> 
    </optgroup> 
</select> 

Als Bonus habe ich die Option Gruppe Tags an seinem Platz belassen als Beispiel für alle zu dienen.

Die question.dataJSON ist:

[ 
    {"group":"Canada","data":[{"value":"Ontario","description":"Toronto"}, 
          {"value":"Quebec","description":"Quebec City"}, 
          {"value":"Manitoba","description":"Winnipeg"} 
          ] 
    }, 
    {"group":"Mexico","data":[{"value":"Jalisco","description":"Guadalajara"}, 
          {"value":"Nayarit","description":"Tepic"} 
          ] 
    }, 
    {"group":"United States of America","data":[ 
          {"value":"Alabama","description":"Montgomery"}, 
          {"value":"Georgia","description":"Atlanta"}, 
          {"value":"Mississippi","description":"Jackson"}, 
          {"value":"Louisiana","description":"Baton Rouge"}, 
          {"value":"Texas","description":"Ausint"} 
          ] 
    } 
]