AngularJS - Wybierz wartość zwraca "? Numer: x?" z zakresu zmiennej

Question

próbuje uzyskać wartość początkową dla wybranej elementu i zamiast wypełniania wartości, dodaje dziwny ciąg, jak widać na tym zdjęciu:

Oto kod JavaScript:

function appCtrl($scope){ 
     $scope.teams = [ 
      {teamId: 10, teamName: 'Foo'}, 
      {teamId: 20, teamName: 'Bar'}, 
      {teamId: 30, teamName: 'Steve'}, 
      {teamId: 40, teamName: 'Jobs'}, 
      {teamId: 50, teamName: 'Macs'} 
     ]; 

     $scope.filters = { 
      teamIdSelected: 20 
     }; 
    } 

Oto HTML:

<div ng-app ng-controller="appCtrl"> 
    <select class="small" ng-model="filters.teamIdSelected"> 
     <option ng-repeat="team in teams" value="{{team.teamId}}">{{team.teamName}}</option> 
    </select> 

Oto jsbin wykazać: http://jsbin.com/EKOpAFI/1/edit

Próbowałem też za pomocą bardzo słabo udokumentowany select elementu here ale nie mogę zmusić go do pracy w ten sposób albo gdzie moje ID druzyny jest wartością i teamName jest etykieta . Zawsze chce umieścić indeks tablicy jako wartość.

Każda pomoc zostanie bardzo doceniona.

Answer 1

select dyrektywy jest naprawdę trochę trudne do zdziwienia. Oto jak to działa w połączeniu z ng-options dyrektywy (która jest niezwykle mocny!)

<select 
    ng-model="filters.teamIdSelected" 
    ng-options="value.teamId as value.teamName for (key, value) in teams" 
    ></select> 

Nie pomylić z wartościami generowanymi w DOM podczas inspekcji opcje wybiera z narzędzi Dev. Atrybut value zawsze otrzymuje swój indeks. Odpowiadające sobie pary wartości kluczy nadal są oceniane względem zakresu, więc wystarczy zaktualizować "model -ng".

Mam nadzieję, że to pomoże!

Answer 2

To jest to, co chcesz:

<select class="small" ng-model="filters.teamIdSelected" 
    ng-options="t.teamId as t.teamName for t in teams"> 
</select> 

nie używaj ng-repeat z <option> s.

Answer 3

polecam korzystania NG-opcje na zaznaczonym elemencie zamiast, tak jak poniżej:

<select class="small" ng-model="filters.teamIdSelected" ng-options="team.teamId as team.teamName for team in teams"></select> 

Dodatkowo, jeśli chcesz dołączyć do "Select Team" opcję:

<select class="small" ng-model="filters.teamIdSelected" ng-options="team.teamId as team.teamName for team in teams"> 
    <option value="">Select Team</options>  
</select>