Angular.js: Używanie modelu ng do rozwijania w ciągu ng-powtórzenia

Question

Mam problem ze zrozumieniem, jak używać modelu ng wewnątrz powtarzania ng. W tym kontekście CargoItems jest listą obiektów, które mają na sobie LoadPoint. LoadPoint ma właściwości Id i Tekst.

Chcę pokazać tekst, związany z bieżącym wyborem z menu rozwijanego, ale chcę również śledzić, który identyfikator jest wybrany oczywiście. Nie jestem więc pewien, jak zaktualizować obie właściwości za pomocą wybranych powiązań, albo poprzez jawne użycie tagów, albo używając opcji ng, których jeszcze nie znałem.

Więc dwa pytania:

1) w jaki sposób prawidłowo wiązać zarówno tekst i wartość z listy select do identyfikatora i tekstu właściwości na moim CargoItem.LoadPoint? Mam przeczucie, że mój model może się mylić?

2) w jaki sposób używać domyślnie opcji ng do wybranej wartości? Wymyśliłem to, pisząc własny tag opcji, ale chciałbym użyć opcji ng, jeśli to możliwe.

<div ng-repeat="cargoItem in cargo.CargoItems"> 
    <span>Selected Load Point: {{cargo.LoadPoint.Text}}</span> 
    <select ng-model="cargoItem.LoadPoint" ng-options="loadPoint.Id as loadPoint.Text for loadPoint in LoadPoints"></select> 
</div> 

Z góry dziękuję!

Answer 1

1. Powiąż z całym obiektem odwołanie zamiast używać właściwości "Id" (loadPoint.Id). Aby to zrobić, wystarczy zmienić ng-options i wyjąć loadPoint.Id as udział:

   <select ng-model="cargoItem.LoadPoint" ng-options="loadPoint.Text for loadPoint in LoadPoints"></select> 
   

2. Jeśli użyć powyższego podejścia i właściwego odniesienia do LoadPoints sprzeciwu, kątowe zrobi to za ciebie automatycznie. Oto przykład, w jaki sposób korzystać z bezpośrednich LoadPoints obiektu:

   $scope.LoadPoints = [{ Id: '1', Text: 'loadPointA' },{ Id: '2', Text: 'loadPointB' }];   
   $scope.cargo = { 
       CargoItems: [{ 
        LoadPoint: $scope.LoadPoints[0] 
       }, { 
        LoadPoint: $scope.LoadPoints[1] 
       }] 
   }; 
   

   Stosując to podejście, cargoItem.LoadPoint (the ngModel) zawsze będzie posiadać odniesienie do całego LoadPoints obiektów (tj { Id: '1', Text: 'loadPointA' }), a nie tylko jego identyfikator (tj. '1').

jsFiddle: http://jsfiddle.net/bmleite/baRb5/