2012-12-03 20 views
19

chcę dodać HTML wybrać z opcji AM, PM z angularjs, Co potrzebne jest posiadanie klucza i wartość opcji jest taka sama:angularjs ngOption z tablicy

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

Moje html wygląda tak

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

i mój kontroler wygląda

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

i każdej pracy rzeczy dobrze.

Moje pytanie brzmi, dlaczego nie mogę mieć to samo, gdy użyłem tablicę (próbowałem wszystkie opcje w NG-opcji) jak to

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

co zawsze robię zawsze uzyskać ten

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

To, czego chcę, to użycie tablicy takiej jak powyżej, opcja ma klucz i wartość są takie same.

Odpowiedz

10

Jest to jest domyślne zachowanie NG-opcji kątowe. Jeśli nie podasz nazwy klucza, kątowy automatycznie wybierze użycie indeksu zamiast klucza. Kod, który to robi, można zobaczyć pod adresem line 405 in /src/ng/directives/select.js on Angular's Github repository.

Nie można nawet wymuszać tego przez "wartość jako wartość dla (indeks, wartość) w wartościach".

Ale jako dnc253 po prostu pobił mnie do ponczu swoją odpowiedzią (pojawił się podczas pisania) ... nie musisz się tym martwić, Angular robi to za ciebie automatycznie.

26

Z AngularJS nie musisz się martwić, jaka jest wartość opcji. Wszystkie selekcje, które widziałem z ng-options mają wartości od 0 do cokolwiek. Jeśli jesteś po prostu patrząc na liście rozwijanej z dwóch opcji, może być tak proste, jak

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

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

+0

Próbowałem link Państwo na liście, wciąż mają te same wartości jak 0,1 nie AM, PM – ibmkhd

+0

Teraz, gdy już zaakceptowane odpowiedź, rozumiesz, co my "Mówię w odpowiedziach? Nie ma znaczenia, jaki atrybut wartości jest ustawiony. Angular zaktualizuje prawidłowo model na podstawie wybranej opcji. – dnc253

+4

Ma to znaczenie, jeśli cel formularza (serwer) oczekuje wartości łańcucha zamiast indeksu. –

2

Znalazłem sposób na umieszczenie określonych danych w wartości opcji dla zaznaczenia. Trzeba dodać atrybut NG-repeat do znacznika opcji wewnątrz wybierz tagu:

<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> 

Jako bonus, zostawiłem tagów grupowych opcja w celu służyć jako przykład dla wszystkich.

question.dataJSON jest:

[ 
    {"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"} 
          ] 
    } 
] 
+1

Dziękujemy!Nadal nie potrafię wyjaśnić, dlaczego opcje ng nie działają dla mnie, ale dzięki twojemu postowi zbudowałem listę opcji z ng-repeat i to działa dobrze! – Edward

Powiązane problemy