AngularJS Radiobutton beim Laden der Seite ausgewählt

Question

Ich erstelle eine Liste über API-Aufruf. Ich brauche den ersten Radioknopf in dieser Liste, um ausgewählt zu werden. Wenn es einen Fall gibt, in dem nur ein Element in der Liste vorhanden ist, möchte ich, dass dieses Element automatisch ausgewählt und dann zur nächsten Seite geleitet wird. Der folgende Code dient nur zur visuellen Auswahl des Optionsfelds - spiegelt den Wert nicht wider, es sei denn, es wird geklickt.

<tbody> 
        <tr ng-repeat="i in app | filter:searchApp"> 
         <td class="text-center"> 
          <input type="radio" ng-model="$parent.currentApp" id={{i.name}} value="{{i.id}}" 
            ng-click="getVal(i)" name="radio" ng-checked="$first"> 
          <label class="ui-radio" for={{i.name}}></label> 
         </td> 
         <td>{{i.name}}</td> 
         <td>{{i.description}}</td> 
        </tr> 
        </tbody> 

$(function() { 
      var $radios = $('input:radio[name=radio]'); 
      if($radios.is(':checked') === false) { 
       $radios.filter('[value=i.id]').prop('checked', true); 
       $rootScope.app= i.id; 
       console.log($rootScope.app); 
      } 
      console.log($radios); 
     }); 

Ich bekomme einen Fehler mit dieser JQuery, da es den Wert = i.id nicht erkennt. Bitte helfen Sie mir die Radio-Taste beim Laden der Seite ausgewählt, so dass der Wert ausgewählt ist (nicht nur visuell überprüft). Die Lösung kann AngularJS oder Jquery sein.

Danke für Ihre Hilfe.

Answer 1

Mit reinem Winkel können Sie das gewünschte Ergebnis erzielen. Hier ist die Arbeit DEMO Ich habe erstellt.

Zusammenfassung: Erstellen Sie ein Modell $scope.selectedListItem = null; Wenn Sie die Daten vom Server erhalten, (in meinem Fall $ scope.apiDataList die Daten ist), dies tun das erste Optionsfeld auszuwählen:

//for multiple elements/options 
$scope.apiDataList = [{id:1,name:"male"},{id:2,name:"female"}]; 

//now when you have got the data, select the first element 
$scope.selectedListItem = $scope.apiDataList[0]; 

Jetzt Sie haben den tatsächlichen Wert des ersten Optionsfelds ausgewählt, wir möchten es jetzt visuell anzeigen. Verwenden Sie etwas Ähnliches in Ihrem Code wie folgt:

<input type="radio" ng-model="selectedListItem" id={{item.name}} value="{{item.id}}" 
        ng-click="selectRadioButton(item)" name="radio" ng-checked="selectedListItem==item"> 

Mitteilung über das ng-checked="selectedListItem==item" Schnipsel. Dadurch wird das Optionsfeld visuell markiert, wenn das aktuelle Optionsfeld ausgewählt ist. Wenn Sie später den Wert des ausgewählten Listenelements/Optionsfelds verwenden müssen, verwenden Sie $scope.selectedListItem.

Hoffe, das hilft