Come associare oggetti complessi con radio e checkbox in AngularJS?

Dire che abbiamo un insieme di progetti esposti tramite il servizio Progetto:Come associare oggetti complessi con radio e checkbox in AngularJS?

{ id: '123', name: 'Yeoman', watchers: '1233', ... } 
{ id: '123', name: 'Grunt', watchers: '4343', ... }

Poi, abbiamo una forma di scegliere il vostro progetto preferito:

Select favorite project: 
%label.radio(ng-repeat="project in Project.query()") 
    %input(type="radio" ng-model="data.favoriteProject" value="{{project.id}}") {{project.name}}

Questa imposta choices.favoriteProject al valore id del progetto scelto. Spesso, abbiamo bisogno di accedere all'oggetto correlato, non solo l'id:

John's favorite project: 
{{Project.get(data.favoriteProject).name}}

Quello che sto cercando è un modo per legare le radio e caselle di controllo direttamente l'oggetto stesso, non l'ID, in modo che potessimo do

John's favorite project: 
{{data.favoriteProject.name}}

invece. Questo è possibile con la direttiva select tramite ng-options, ma come possiamo farlo con radio e checkbox? Mi piacerebbe ancora usare gli id per la corrispondenza al posto dei riferimenti, se possibile.

per chiarire, ecco un esempio quello che sto cercando

Select favorite project: 
%label.radio(ng-repeat="project in Project.query()") 
    %input(type="radio" ng-model="data.favoriteProject" value="{{project}}" ng-match="id") {{project.name}}

Dice: "Si prega di legare data.favoriteProject all'oggetto progetto vero e utilizzare l'ID per verificare se corrispondono (invece di riferimenti)".

fonte

2013-01-15 randomguy

[Update]

ho completamente cambiato la mia risposta dopo aver scoperto la direttiva ngValue, che sembra essere senza documenti. Consente di associare oggetti anziché solo stringhe come valori per ngModel agli ingressi del pulsante di opzione.

<label ng-repeat="project in projects"> 
    <input type="radio" ng-model="data.favoriteProject" 
    ng-value="project">{{project.name}}</input> 
</label> 

<p>Your favorite project is {{data.favoriteProject.name}}.</p>

Questo utilizza i riferimenti per controllare piuttosto che solo gli ID, ma penso che nella maggior parte dei casi, questo è ciò che la gente sarà alla ricerca di. Se vuoi che comporti solo rigorosamente in base agli ID, puoi utilizzare [Vecchia risposta], o, ancora meglio, solo creare una funzione, ad es. projectById(projectId) che è possibile utilizzare per cercare un progetto in base al suo ID.

Ho aggiornato il JSFiddle dimostrare: http://jsfiddle.net/BinaryMuse/pj2GR/

[Vecchio risposta]

forse si può utilizzare l'attributo ng-change della direttiva pulsante di opzione per ottenere quello che vuoi. Considerate questo HTML:

<p>Select your favorite project:</p> 
<label ng-repeat="project in projects"> 
    <input type="radio" ng-model="data.favoriteProjectId" value="{{project.id}}" 
     ng-change="data.favoriteProject = project"> 
    {{project.name}} 
    </input> 
</label> 

<p>Your favorite project is {{data.favoriteProject.name}}.</p>

Si potrebbe anche chiamare una funzione all'interno ng-change, per esempio setfavoriteProject(project) --ma non ho fatto che qui per semplicità.

Ecco un jsFiddle lavorando per dimostrare la tecnica: http://jsfiddle.net/BinaryMuse/pj2GR/7/

fonte

2013-01-16 06:20:43

Grazie! Mi piace davvero questa soluzione. È semplice, ma funziona perfettamente! Lascerò la domanda aperta per altre soluzioni per ora. Il problema con questo è che c'è la duplicazione dei dati (l'id) e dobbiamo gestire noi stessi impostando il valore. – randomguy

Perché utilizzare i progetti [$ indice] anziché solo l'oggetto del progetto? – randomguy

Ho effettuato il refactoring in jsFiddle, ma ho dimenticato di aggiornare il post. Grazie! –

No ng-cambiamento necessario (e non sono sicuro, se si tratta di una buona pratica di scrivere inline-codice come questo invece. le direttive degli angolari non sono troppo lontane da se stesse).Perché non fare qualcosa di simile (funziona con ng-repeat pure):

Fiddle: http://jsfiddle.net/JohannesJo/VeZxh/3/

Codice:

<body ng-app="app"> 
<div ng-controller='controller'> 
<input type = "radio" ng-model = "oSelected" value = "{{aData[0]}}"> 
<input type = "radio" ng-model = "oSelected" value = "{{aData[1]}}"> 
<div>test:  {{oSelected}}</div> 
</div> 
</body> 


app = angular.module('app',[]); 

app.controller('controller', function($scope){ 
$scope.aData = [ 
    {o:1}, 
    {o:2} 
]; 
$scope.oSelected = {}; 
});

Edit: ho forse dovrei dire che questo non funziona per le caselle di controllo, poiché il valore sarà vero o falso. Anche un modello condiviso porterà a tutte le checkbox che vengono controllate o deselezionate contemporaneamente.

fonte

2013-02-28 21:08:58

vedi la soluzione 'ng-value', è piuttosto flessibile – genuinefafa

Come associare oggetti complessi con radio e checkbox in AngularJS?

risposta

Problemi correlati