Question

Here就是我的榜样。结果产生了两组单选按钮。但正确检查项目的组只有一个。它工作正常，但为什么需要另一组中的项目未经检查？

这是代码：

      <!DOCTYPE html>
<html ng-app="test">
     <head>

    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>


</head>
<script>

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


    function test1($scope)
    {
        $scope.test = [1,2,3];

        $scope.generateChartId = function (stn)
        {
            return "chart" + stn;
        };

        $scope.generateRadioOptionName = function (stn)
        {
            return "optionsRadios" + stn;
        };

        $scope.generateRadioOptionId = function (stn, num)
        {
            return "optionsRadio" + stn + num;
        };

    }

</script>


<body ng-app="test">

<div id="example" >
    <div class="box-col row" ng-repeat="stn in [1,2]">

        <div ng-controller="test1">
            <div>
                <label>
                    <input type="radio" name="{{generateRadioOptionName(stn)}}"
                       id="{{generateRadioOptionId(stn,1)}}" checked>
                    XYZ
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="{{generateRadioOptionName(stn)}}"

                           id="{{generateRadioOptionId(stn,2)}}">
                    ENU
                </label>
            </div>
        </div>


    </div>
</div>


 </body>
</html>

提前致谢！

Answer 1

您缺少<form>代码，而且您的HTML有点“不整洁” - 您应该关闭<input>代码

工作示例：

http://jsfiddle.net/michal_taborowski/L77x525s/

Answer 2

ng-controller="..."

和

ng-repeat="..."

应交换位置。

Answer 3

我有类似的问题，而且奇怪的是它适用于Angular 1.0.2，但是一旦我升级到1.4.8，它就会停止正常工作。我希望行为是所有无线电组都应该选择预设项目，但发生的事情是只选择每个面板中的最后一个组

请参阅jsfiddle

这是html

 <body ng-controller="Channels" class="container-fluid">

 <div ng-if="sections===null">
   Loading...
 </div>

 <div class="panel-group" id="accordion1" ng-if="sections!==null">

     <div class="panel panel-default" ng-repeat="item in sections | orderBy: 'resourceCode'">

       <div class="panel-heading">
         <div class="glyphicon glyphicon-plus-sign text-primary" style="float: left; margin-right: 5px;"></div>
         <a data-toggle="collapse" data-parent="#accordion1" href="#{{getID(item)}}">
           <span class="panel-title" ng-bind="item.resourceCode"></span>
         </a>
       </div>

       <div id="{{getID(item)}}" class="panel-collapse collapse" ng-class="{'in': isActiveSection(item)}">
       <table class="table">
         <thead>
           <th class="col-md-6">Name</th>
           <th class="col-md-2 text-center">Read</th>
           <th class="col-md-2 text-center">ReadWrite</th>
           <th class="col-md-2 text-center">None</th>
         </thead>       
         <tr ng-repeat="subitem in item.subPrivilegeModels | orderBy: 'resourceCode'">
           <td class="col-md-6"><span ng-bind="subitem.resourceCode"></span></td>
           <td class="col-md-2 text-center">               
             <input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READ'"/>                 
           </td>
           <td class="col-md-2 text-center radio">
             <input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READWRITE'"/>
           </td>
           <td class="col-md-2 text-center radio">
             <input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'NONE'"/>
           </td>
         </tr>
         <tbody>
       </table>
       </div>

     </div>

   </div>

Angularjs。伍重复。单选按钮组无法正常工作

3 个答案: