如何从动态生成的单选按钮中选择单选按钮值?

时间:2017-07-05 06:15:21

标签: javascript angularjs

您好我正在开发angularjs中的Web应用程序。我正在使用ng-repeat动态生成radiobuttons,如下所示。

<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()" />

我正在尝试选择单选按钮,如下所示。

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

我收到错误无法读取未定义的属性'perm_levelname'。我可以在这里获得帮助以获得选定的单选按钮吗?谢谢

3 个答案:

答案 0 :(得分:1)

按名称对单选按钮进行分组,并为单选按钮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()"/>

答案 1 :(得分:1)

  

使用单选按钮的ng-click事件获取当前选定的值,并为值指定范围对象。然后在单击“应用”按钮时从保存的范围中获取值。

样本:

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>

答案 2 :(得分:0)

你应该像这样使用单选按钮组 -

<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()"/>

在控制器内部 -

$scope.radioButtonValue='';

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