2017-02-01 2 views
0

В моем приложении Angular1.x мои модели правильно отображаются на мой выбор радио, однако сам переключатель не выбран, за исключением последнего. Не совсем уверен, в чем проблема. Для иллюстрации этого поведения я создал небольшой пример ниже. Любая помощь приветствуется.Правильный выбор углового радио

http://plnkr.co/edit/dgGCvtOEb9WKTNtQHjqd?p=preview

angular.module('todoApp', []) 
 
    .controller('TodoListController', function() { 
 
    var todoList = this; 
 
    todoList.questions = [{ 
 
     "category": "Movies", 
 
     "questions": [{ 
 
      "title": "M1", 
 
      "score": "4", 
 
      }, 
 
      { 
 
      "title": "M2", 
 
      "score": "2", 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "category": "Foods", 
 
     "questions": [{ 
 
      "title": "F1", 
 
      "score": "3", 
 
      }, 
 
      { 
 
      "title": "F2", 
 
      "score": "4", 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "category": "Sports", 
 
     "questions": [{ 
 
      "title": "S1", 
 
      "score": "5", 
 
     }] 
 
     } 
 
    ]; 
 

 
    });
<!doctype html> 
 
<html ng-app="todoApp"> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
    <script src="todo.js"></script> 
 
    <link rel="stylesheet" href="todo.css"> 
 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css"> 
 
    </head> 
 
    <body> 
 
    <h2>Todo</h2> 
 
    <div ng-controller="TodoListController as todoList"> 
 
     <div ng-repeat="(ccKey, cc) in todoList.questions"> 
 
     <hr/> 
 
     <div> 
 
      <b style="color: red;">Category</b> : {{cc.category}} 
 
     </div> 
 
     <div ng-repeat="(qqKey, qq) in cc.questions"> 
 
      <br/> 
 
      {{qq.title}} : Selected Score: {{qq.score}} 
 
      <br/> 
 
      <div ng-repeat="n in [].constructor(5) track by $index"> 
 
      <input type="radio" ng-model="qq.score" name="q-{{ccKey}}-{{qqKey}}" value="{{$index+1}}"><br/>Score: {{$index+1}} : Group: q-{{ccKey}}-{{qqKey}} 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

ответ

1

Попробуйте удалить атрибут name из вашего <input type="radio"> тега. Это, похоже, вызывает конфликт с тем, что делает Угловой, чтобы управлять вашими радио-тегами. Я могу видеть все выбранные категории, и выбор по-прежнему сгруппирован по заданному вопросу.

В угловом входе [радио] документы, они не показывают, используя name атрибут: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

0

Если то, что вы хотите, первоначальный выбор значений при первой загрузке страницы, а затем использовать

ng-value="($index+1).toString()" 

Поскольку ваши баллы указаны в виде строк, вам нужно преобразовать число в строку в соответствии с результатом, когда вы используете «ng-value». Или лучше, вы можете просто установить свои результаты в виде целых чисел и оставить остальную часть кода без изменений:

todoList.questions = [{ 
     "category": "Movies", 
     "questions": [{ 
      "title": "M1", 
      "score": 4, 
      }, 
      { 
      "title": "M2", 
      "score": 2, 
      } 
     ] 
     }, .... 

Here is a modified plunker