Wie Radio-Button-Wert von dynamisch generierten Radio-Buttons erhalten?

Question

Hallo Ich entwickle Web-Anwendung in angularjs. Ich erzeuge Radiobuttons dynamisch mit ng-repeat wie unten.

<ul> 
    <li ng-repeat="level in permissions"> 
     <input name="level.perm_levelname" type="radio" ng-model="level.perm_levelname" value="{{level.perm_levelname}}"> {{level.perm_levelname}} 
     <a ng-click="gotopermMap({permisssionID: level.id})">View</a> 
    </li> 
</ul> 
<input type="button" value="APPLY" ng-click="apply()" /> 

Ich versuche, Radio-Button wie unten ausgewählt zu bekommen.

$scope.apply=function() 
     { 
      var permname = $scope.name; 
      console.log($scope.level.perm_levelname); 
     } 

Ich erhalte einen Fehler Kann die Eigenschaft 'perm_levelname' von undefined nicht lesen. Kann ich hier Hilfe bekommen, um den Radio Button zu bekommen? Danke

Answer 1

Gruppe Radiobuttons durch einen Namen und geben Sie einen gemeinsamen Rahmen Variable für Radio-Buttons ng-modal

<ul> 
    <li ng-repeat="level in permissions"> 
     <input name="myradiobtn" type="radio" ng-model="myradioBtnValue" ng-value="level.perm_levelname"> 
     {{level.perm_levelname}} 
     <a ng-click="gotopermMap({permisssionID: level.id})">View</a> 
    </li> 
    </ul> 
    <input type="button" value="APPLY" ng-click="apply()"/> 

Answer 2

Sie Radiobutton Gruppe wie this--

<ul> 
    <li ng-repeat="level in permissions"> 
     <input name="btnGroup" type="radio" ng-model="radioButtonValue" value="{{level.perm_levelname}}"> 
     {{level.perm_levelname}} 
     <a ng-click="gotopermMap({permisssionID: level.id})">View</a> 
    </li> 
    </ul> 
    <input type="button" value="APPLY" ng-click="apply()"/> 

Und im Inneren des Controllers verwenden sollten -

$scope.radioButtonValue=''; 

$scope.apply=function() 
     { 
      var permname = $scope.name; 
      console.log($scope.radioButtonValue); 
     } 

Answer 3

Verwenden Sie ng-click Ereignis für Optionsfeld, um den aktuell ausgewählten Wert zu erhalten, und weisen Sie dem Wert ein Bereichsobjekt zu. Holen Sie dann den Wert aus dem gespeicherten Bereich abject, während Sie auf die Schaltfläche "Anwenden" klicken.

DEMO:

function TodoCtrl($scope) { 
 

 
$scope.permissions= [{perm_levelname:"hai"},{perm_levelname:"bye"},{perm_levelname:"come"},{perm_levelname:"go"}] 
 
     $scope.apply=function() 
 
     { 
 
     alert($scope.currecntClickValue); 
 
     } 
 
     $scope.currecntClick=function(currecntClickValue) 
 
     {              
 
      $scope.currecntClickValue=currecntClickValue.perm_levelname; 
 
     } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app> 
 
    <h2>Todo</h2> 
 
    <div ng-controller="TodoCtrl"> 
 
<ul> 
 
    <li ng-repeat="level in permissions">  
 
     <input name="groupName" type="radio" ng-click="currecntClick(level)" ng-value="level.perm_levelname"> 
 
     {{level.perm_levelname}} 
 
     <a href="#" ng-click="gotopermMap({permisssionID: level.id})">View</a> 
 
    </li> 
 
    </ul> 
 
    <input type="button" value="APPLY" ng-click="apply()"/> 
 
    </div> 
 
</div>