Powiąż obiekt JSON z przyciskiem radiowym w angularjs

Question

Próbuję powiązać przyciski radiowe z obiektami. Spędziłem godzinę, próbując to zrozumieć iw końcu przyznać się do porażki. Oto co mam:

<table> 
     <tr ng-repeat="theCustomer in customers"> 
      <td> 
       <input type="radio" ng-model="currentCustomer" value="theCustomer" id="{{theCustomer.id}}" ng-change="currentCustomer = theCustomer"> 
       <label for="{{theCustomer.id}}">{{theCustomer.name}}</label> 
      </td> 
     </tr> 
</table> 

kątowe rzeczy:

bankApp.controller("BankController", function ($scope, CustomerRepository) 
{ 
    $scope.customers = []; 
    $scope.currentCustomer = {}; 

    $scope.createCustomer = function() { 
     CustomerRepository.save($scope.customer, function (customer) { 
      $scope.customers.push(customer); 
      $scope.customer = {}; 
     }); 
    }; 
}); 

Obecnie, gdy próbuję i kliknij na przycisku radiowego nic się nie dzieje, to nawet nie oznaczysz się sprawdził. Jestem pewien, że musi to być naprawdę proste rozwiązanie. Celem końcowym jest posiadanie klienta odzwierciedlonego w wyborze radia.

Answer 1

<input type="radio" ng-model="$parent.currentCustomer" name="foo" ng-value="theCustomer" id="{{theCustomer.id}}">{{theCustomer.name}}</td> 

Kluczem tutaj jest ng-value="theCustomer. W ten sposób kątowy wie, który obiekt jest wybrany. Plik html value zna tylko wartości łańcuchowe i nie może mapować do obiektów.

Po wstawieniu powyższego kodu radio będzie odzwierciedlało model, nawet jeśli zostanie zmienione programowo. Ponadto nie można zapomnieć o modelu $parent w modelu ng, ponieważ ng-repeat tworzy nowy zakres.

Answer 2

Podobno uzyskanie grupy radiowej do pracy w trybie powtarzania ng może być nieco trudne. Problem polega na tym, że ng-repeat tworzy własny zakres podrzędny. Jednym z rozwiązań jest powiązanie modelu z $ parent. This thread podaje przykład.

Stworzyłem także working fiddle, który bardziej przypomina twój przykład.

W istocie, myślę, że HTML jest jedynym punktem, który wymaga przeróbek:

<table> 
     <tr ng-repeat="theCustomer in customers"> 
      <td><input type="radio" ng-model="$parent.currentCustomer" name="foo" value="{{theCustomer}}" id="{{theCustomer.id}}">{{theCustomer.name}}</td> 
     </tr> 
    </table> 

Answer 3

To właśnie z powodu spadku zakresu, można przeczytać więcej o problemie here.

Jednym z rozwiązań, których używam w takim przypadku, jest powiązanie obiektu z właściwością obiektu zamiast wartości pierwotnej, takiej jak ng-model="form.currentCustomer".

Demo: Plunker