Lier objet JSON à bouton radio en angularjs

Donc je suis en train de lier des boutons radio à des objets. J'ai passé une heure à essayer de comprendre le présent et à enfin admettre la défaite. Voici ce que j'ai:

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

L'angle de trucs:

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

Actuellement, lorsque j'essaie de cliquer sur un bouton radio ne se passe rien, il n'a même pas la marque de se faire contrôler. Je suis sûr qu'il y a à être vraiment une solution simple pour cela. L'objectif final est d'avoir currentCustomer tenir le client reflète dans la radio de sélection.

OriginalL'auteur jensengar | 2013-04-29

angularjs

18
```
<input type="radio" ng-model="$parent.currentCustomer" name="foo" ng-value="theCustomer" id="{{theCustomer.id}}">{{theCustomer.name}}</td>
```
La clé ici est la ng-value="theCustomer. C'est de cette façon angulaire sait quel est l'objet qui est sélectionné. Le html value ne connaît que les valeurs de chaîne et ne peut pas mapper des objets.

Si vous insérez le code ci-dessus, la radio va refléter le modèle, même si elle est modifiée par programmation. Aussi, vous ne pouvez pas oublier la $parent dans le ng-modèle, car la ng-repeat crée un nouveau champ d'application.

OriginalL'auteur jensengar
4

Apparemment, l'obtention d'une radio le groupe de travail à l'intérieur d'une ng-repeat peut-être un peu délicat. Le problème est avec le ng-repeat de la création de son propre enfant. Une solution consiste à lier le modèle de l' $parent. Ce fil donne un exemple.

J'ai également créé un travail de violon qui ressemble plus étroitement à votre exemple.

En essence, je pense que votre code html est le seul point qui doit retravailler:
```
    <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>
```
Donc, cela fonctionne la plupart du temps, le seul problème est currentCustomer est défini en tant que stringified json plutôt que l'objet. Est-il une solution facile pour cela? J'ai essayé de le faire sans les doubles accolades et qui n'a pas fonctionné.
Que voulez-vous le résultat final pour ressembler exactement?
J'ai effectivement pensé à elle. La valeur de l'attribut prend seulement une chaîne de caractères et cant handle d'un objet. J'ai refait le permettre. Merci!
Pouvez-vous poster le refactoring de code? Comment êtes-vous en mesure de définir la valeur par défaut sélectionnée bouton radio? jsfiddle.net/uNFWW/31
me voir réponse ci-dessous.

OriginalL'auteur rGil
3

C'est à cause de la portée de l'héritage, vous pouvez en savoir plus sur le problème ici.

Une solution que j'utilise dans ce cas est de lier l'objet à une propriété de l'objet au lieu d'une valeur primitive comme ng-model="form.currentCustomer".

Démo: Plunker

OriginalL'auteur Arun P Johny

Vous devez vous connecter pour publier un commentaire.