Associare l'oggetto JSON al pulsante di opzione in angularjs

Question

Quindi sto tentando di associare i pulsanti di opzione agli oggetti. Ho passato un'ora a cercare di capirlo e finalmente ammettere la sconfitta. Ecco cosa ho ottenuto:

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

La roba angolare:

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 = {}; 
     }); 
    }; 
}); 

Attualmente, quando provo e fare clic su un pulsante di opzione non succede nulla, ma non ha nemmeno Mark ottenere controllato. Sono sicuro che ci dev'essere una soluzione davvero semplice a questo. L'obiettivo finale è di avere currentCustomer in attesa che il cliente rifletta nella selezione radio.

Answer 1

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

La chiave qui è la ng-value="theCustomer. Questo è quanto angolare sa quale oggetto è selezionato. Il codice HTML value conosce solo i valori di stringa e non può associarsi agli oggetti.

Se si inserisce il codice sopra riportato, la radio rifletterà il modello, anche se viene modificato a livello di codice. Inoltre, non è possibile dimenticare $parent nel modello ng perché lo ng-repeat crea un nuovo ambito.

Answer 2

Apparentemente, far funzionare un gruppo radio all'interno di una ripetizione ng può essere un po 'complicato. Il problema è con la ng-repeat che crea il proprio ambito figlio. Una soluzione è associare il modello al $ parent. This thread fornisce un esempio.

Ho anche creato un working fiddle che ricorda più da vicino il tuo esempio.

In sostanza, penso che il codice HTML è l'unico punto che ha bisogno di rielaborazione:

<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

E 'a causa dell'eredità campo di applicazione, si può leggere di più sul problema here.

Una delle soluzioni che uso in questo caso è di associare l'oggetto a una proprietà dell'oggetto anziché a un valore primitivo come ng-model="form.currentCustomer".

Demo: Plunker