javascript - Radio button not working within nested ng-repeats -


i have web page check boxes & radio buttons within nested ng-repeats. when clicking check boxes underlying view model getting updated properly, when click on radio buttons, view model not getting updated properly. within group, when select option selected model property gets updated true other 1 doesn't change false.

e.g. when click on radio buttons against chicken 1 one, of them becomes true. when select one, want other ones become false

my view model given below.

$scope.itemgroups = [{         "name": 'non veg',             "items": [{             "selected": false,                 "name": 'chicken',                 "portions": [{                 "selected": false,                     "name": '1 cup'             }, {                 "selected": false,                     "name": '2 cups'             }, {                 "selected": false,                     "name": '3 cups'             }]         }, {             "selected": true,                 "name": 'egg',                 "portions": [{                 "selected": false,                     "name": '1 cup'             }, {                 "selected": false,                     "name": '2 cups'             }, {                 "selected": false,                     "name": '3 cups'             }]         }]     }, {         "name": 'veggie',             "items": [{             "selected": false,                 "name": 'potato',                 "portions": [{                 "selected": false,                     "name": '1 cup'             }, {                 "selected": false,                     "name": '2 cups'             }, {                 "selected": false,                     "name": '3 cups'             }]         }, {             "selected": false,                 "name": 'tomato',                 "portions": [{                 "selected": false,                     "name": '1 cup'             }, {                 "selected": false,                     "name": '2 cups'             }, {                 "selected": false,                     "name": '3 cups'             }]         }]     }]; 

the way bind html:

<div ng-repeat="itemgrp in itemgroups">              <h1>{{itemgrp.name}}</h1>              <div ng-repeat="item in itemgrp.items">                 <input type="checkbox" ng-model="item.selected" />{{item.name}}                 <label ng-repeat="portion in item.portions">{{portion.name}}                     <input type="radio" name="radio_{{itemgrp.name}}" ng-model="portion.selected" ng-value="true" />                 </label>             </div>         </div> 

fiddle: http://jsfiddle.net/awqv0rb0/16/

can please guide me on can issue here? there better way of achieving trying here? need loop through json , values of selected items.

this trivial issue. too, faced earlier stages.

if looping on group of items , each item has set of radio buttons, radio buttons given item must have 'name' attribute value item name.

ex. if item name 'chicken', it's radio buttons labelled '1 cup', '2 cups', '3 cups' should have name='{{item.name}}' i.e. 'chicken'.

change point in code:

<input type="radio" name="{{item.name}}" ng-model="portion.selected" ng-value="true" /> 

here jsfiddle demo


Comments

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

mercurial graft feature, can it copy? -