Angularjs. Ng-повтор. Группа переключателей не работает должным образом

Here - мой пример. В результате создается две группы переключателей. Но группа с правильно отмеченным элементом является только одной. Он работает нормально, но почему необходимый элемент в другой группе не установлен?Angularjs. Ng-повтор. Группа переключателей не работает должным образом

Вот код:

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

Спасибо заранее!

источник

2014-09-09 Sharov

Вы отсутствуете <form> тега, а также ваш HTML является немного "неопрятным" - вы должны закрыть <input> тегов

Рабочим примера:

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

источник

2014-09-09 11:17:30 MiTa

Большое спасибо! – Sharov

Также, пожалуйста, можете ли вы объяснить, почему тег формы делает магию? – Sharov

ng-controller="..."

ng-repeat="..."

следует поменять местами.

источник

2014-09-09 10:55:41

Спасибо за ответ! Это не тот случай, я просто экспериментировал и забыл обменять. Итак, есть что-то еще ... http://jsfiddle.net/yynswvbo/1/ – Sharov

Думаю, вам нужен массив объектов, например [{'num': 1, 'val': 'XYZ'}, {'num': 2, 'val': 'ENU'}], и повторите это в одном блоке div. –

У меня аналогичная проблема, и странная вещь заключается в том, что она работает с 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>

источник

2016-01-18 00:19:39 CraigM

, чтобы не беспокоиться ... удалось решить его, используя элемент формы между разделами и изменив назначение радиообмена – CraigM

Angularjs. Ng-повтор. Группа переключателей не работает должным образом

ответ

Смежные вопросы