Twitter Bootstrap Question posted in

Angular radio selection not checked correctly – Twitter bootstrap

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>
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search