Przycisk radiowy domyślnie zaznaczony przy korzystaniu z powtarzania ng

Question

Chciałam mieć zaznaczony przycisk radiowy z listy przycisków radiowych, które prezentuję na ekranie za pomocą polecenia ng-repeat, ale mój kod nie działa. Oto, co robię:

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

Celem kodu jest sprawdzenie pierwszego przycisku radiowego, a pozostałe opcje nie są zaznaczone. Ten kod ma problem: nie działa. Ale przynajmniej daje pojęcie o tym, co próbuję zrobić: Chcę jeden z przycisków zaznaczonych domyślnie, bez względu na to, który jest.

Answer 1

Przycisk radiowy będzie sprawdzić, czy wartość atrybutu wejściowego jest równa wartości modalnych zastosowane na przycisku radiowym.

<div ng-repeat="val in ['a','b','c']"> 
    <input 
      type="radio" 
      name="val" 
      data-ng-model="role" 
      data-ng-value="val" 
      ng-init="$index==0?(role=val):''" 
     /> 
    {{val}} 
</div> 

Zaznaczone = "zaznaczone" nie będą działać w kontekście kątowym. Możesz albo ustawić wartość przycisku radiowego jawnie w kontrolerze, albo możesz nim zarządzać w samym widoku, tak jak to zrobiłem w powyższym przykładzie. Ale modal powinien być równoznaczny zgodnie z atrybutem wartości w elemencie inmput.

Na przykład, jeśli modalne jest x na trzech przyciskach radiowych, a każdy przycisk radiowy ma inną wartość, np. A, b i c. wtedy x musi być równe dowolnej wartości do sprawdzenia.

Plunker

Answer 2

Nie potrzebujesz checked="checked", myślę, że kątowe zajmie się nim sam, jeśli ustawisz model na jedną z wartości. Coś jak:

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

Również zakres może potknąć cię tutaj, model może być $parent.club.role

Answer 3

Nie trzeba się martwić o sprawdzone.

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

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

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

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

}); 

Praca tutaj: https://jsfiddle.net/qnw8ogrk/1/

Answer 4

jeśli używasz prymitywny typ na liście, odpowiedź z bm1729 jest poprawna, ale jeśli użyj obiektów na liście, a następnie zobacz ten przykład: https://jsfiddle.net/9chd58mk/2/

pierwsza część jest zła, ponieważ wybrany obiekt wygląda tak samo z elementem listy, ale nie jest taki sam jak referencja. operator == jest w tym przypadku fałszywy:

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

, ale drugi i trzeci przykład to odniesienia do pozycji listy, a przycisk opcji jest zaznaczony. operator == jest prawdą w tym przypadku

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