CODEWITHSUNDEEP
javascriptangularjs
Jimmy
Jimmy

Reputation: 47

Angular radio selection not checked correctly

In my Angular1.x app, my models maps to my radio selection correctly, however the radio button itself is not selected except for the very last one. Not really sure what the problem is. I created a very small example below to illustrate this behaviour. Any help is greatly appreciated.

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>

Upvotes: 0

Views: 82

Answers (2)

Cagatay Kalan
Cagatay Kalan

Reputation: 4126

If what you want is the initial selection of the values when the page first loads,then use 

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

Since your scores are given as strings, you need to convert the number to string to match the score when you use "ng-value". Or better, you can just set your scores as integers and leave the rest of the code unchanged:

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

Here is a modified plunker

Upvotes: 0

Ben Simpson
Ben Simpson

Reputation: 4049

Try removing the name attribute from your <input type="radio"> tag. This seems to be causing a conflict with what Angular is doing to manage your radio tags. I am able to see all categories selected, and the selections are still grouped within a given question.

In the Angular input[radio] docs, they do not show using a name attribute: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

Upvotes: 1

Related Questions