2014-09-19 9 views
9

Nie otrzymuję wartości id wartości opcji wybranego elementu tagu.id jako ng-model dla select in angularjs

<div ng-controller="UserCreationCtrl"> 
    <form novalidate="novalidate" class="form-horizontal"> 
     <div class="control-group"> 
      <label class="control-label" for="inputFirstName">First name:</label> 

      <div class="controls"> 
       <input type="text" id="inputFirstName" ng-model="doctor.firstName" placeholder="First name"/> 
      </div> 
     </div> 

     <div> 
      <span class="nullable"> 
       <select ng-model="user.lookupId" ng-options="select as speciality.lookupName for speciality in specialityList" ng-change="selectedSpecilaty()"> 
        <option value="">-- choose speciality --</option> 
       </select> 
      </span> 
     </div> 
    </form> 
</div> 

Mój kontroler

app.controller('UserCreationCtrl', ['$scope', 
    function ($scope) { 

    $scope.specialityList = [ 
           {lookupId : 1, lookupName: 'speciality1'}, 
           {lookupId : 2, lookupName: 'speciality2'}, 

           {lookupId : 4, lookupName: 'speciality6'}, 
           {lookupId : 3, lookupName: 'speciality3'} 
           ]; 

    $scope.user = {firstName: 'first name value', lookupId : 4}; 

    $scope.selectedSpecilaty = function() 
    { 
     alert($scope.user.lookupId); 
    } 
}]);  

Jak mogę to zrobić. pole ostrzeżenia, które potwierdziło wartość jako "niezdefiniowane".

Odpowiedz

21

ng-options Wzory mogą być mylące, aby zacząć, ponieważ jest ich sporo.

Co napisałeś teraz oznacza:

select  as  speciality.lookupName for speciality in specialityList 
^-- the value to set to ^-- what to display  ^-- iteree name ^-- iterables 

tak więc zmienne masz dostępne w wyrażeniu są everythin zdefiniowaniu zakresu oraz kontekstowej specialty zmienną. Gdy wybierzesz coś, zostanie przypisane do select, co w rzeczywistości jest undefined.

Czego szukasz

ng-options="speciality.lookupId as speciality.lookupName for speciality in specialityList" 

Spowoduje to ustawienie wartości co ng-model wskazuje na kontekstowej specialty „s lookupId

+1

To działa dokładnie to, czego potrzebuję dzięki. –

+1

W moim przypadku (Angular 1.2.15) miałem właściwe wyrażenie, ale niepotrzebnie używałem wyrażenia "track by" na końcu, co najwyraźniej powoduje jego przerwanie i powoduje, że model śledzi cały obiekt zamiast wartości/ID wybierasz. Jest to częściowo spowodowane brakującą dokumentacją i ewentualnie poprawione w nowszych wersjach Angular; zobacz problem z GitHub: https://github.com/angular/angular.js/issues/6564. –

+0

Oficjalna dokumentacja ngOptions jest bardzo niejasna odnośnie użycia 'as' do zdefiniowania wartości ustawianej na ngModel. Dzięki za sprawienie, że myśli będą bardziej przejrzyste! :) –

3

Trzeba zmienić klucz select który odnosi się do klucz value określony w Twoim ng-options. Ponieważ klucz value jest specjalność następnie związać user.lookupId do ng-model z do specialty.lookupId

więc select'sng-options powinien być aktualnie wybrana opcja na lookupId, trzeba zmienić wybrać:

<select ng-model="user.lookupId" ng-options="speciality.lookupId as speciality.lookupName for speciality in specialityList" ng-change="selectedSpecilaty()"> 
    <option value="">-- choose speciality --</option> 
</select> 
+0

to jest to samo co powyżej. Pracujący. dzięki. –