Pulsante radio selezionato per impostazione predefinita quando si utilizza ng-repeat

Question

Ho voluto che un pulsante di opzione fosse estratto da un elenco di pulsanti di opzione che presento sullo schermo utilizzando ng-repeat, ma il mio codice non funziona. Questo è quello che sto facendo:

<div class="clubRole" data-ng-if="club.checked"> 
    <div data-ng-repeat="role in securityGroups.slice(0,1)"> 
     <input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode" checked="checked"> {{role.description}} 
    </div> 
    <div data-ng-repeat="role in securityGroups.slice(1,securityGroups.length+1)"> 
     <input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode"> {{role.description}} 
    </div>  
</div> 

L'intenzione del codice è quello di ottenere il primo pulsante di opzione è selezionata, e gli altri incontrollato. Quel codice ha un problema: non funziona. Ma almeno dà l'idea di ciò che sto cercando di fare: voglio che uno dei pulsanti radio sia selezionato per impostazione predefinita, indipendentemente da quale sia.

Answer 1

tasto Radio sarà verificare se il valore dell'attributo di ingresso è uguale al valore di modal applicato sul pulsante radio.

Selezionato = "selezionato" non funzionerà in contesto angolare. È possibile impostare il valore del pulsante di opzione in modo esplicito nel controller oppure è possibile gestirlo nella vista stessa come ho fatto nell'esempio precedente.Ma il modale deve essere equo in base all'attributo value sull'elemento inmput.

Ad esempio se modale è x su tre pulsanti di opzione e ciascun pulsante di opzione ha valori diversi come a, be c. allora x deve essere uguale a qualsiasi valore da controllare.

Plunker

Answer 2

Non è necessario checked="checked", penso che angular si prenderà cura di esso stesso se si imposta il modello su uno dei valori. Qualcosa di simile:

club.role = securityGroups.slice(0,1)[0].securityGroupCode; 

Inoltre, la portata può viaggio fino qui, il modello può avere per essere $parent.club.role

Answer 3

Non è necessario preoccuparsi di controllare.

HTML:

<div ng-app="app"> 
<div ng-controller="mainController"> 
    <label ng-repeat="option in options"> 
     <input type="radio" ng-model="$parent.selected" ng-value="option"/>{{option}} 
    </label> 
</div> 
</div> 

JavaScript: violino

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

appModule.controller('mainController', function($scope) { 

$scope.selected = 'red'; 
$scope.options = ['red', 'blue', 'yellow', 'green']; 

}); 

Lavorare qui: https://jsfiddle.net/qnw8ogrk/1/

Answer 4

se si utilizza un tipo primitivo nella lista, la risposta di bm1729 è corretta, ma se si utilizzare gli oggetti nell'elenco, quindi osservare questo esempio: https://jsfiddle.net/9chd58mk/2/

la prima parte non è buona, perché l'oggetto selezionato è simile a un elemento della lista, ma non lo stesso per riferimento. l'operatore == è false in questo caso

$scope.selected = {c:'red'}; 
$scope.options = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}]; 

ma il secondo e il terzo esempio è utilizzare il riferimento voce di elenco, e il pulsante di opzione selezionata. l'operatore == è vero in questo caso

$scope.options3 = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}]; 
$scope.selected3 = $scope.options3[0];