javascript - Ionic - Check 2 radio buttons (different lists) by default -


i taking first steps in ionic, , trying create app.

in example, have 2 radio button lists (with options 1, 2, 3 , options 4, 5, 6):

enter image description here

i both radio buttons 2 , 4 checked default.

why radio button 4 checked?

what missing?

code below.

from model html:

<ion-view view-title="radio button demo">   <ion-header-bar align-title="left" class="bar-positive">     <h1 class="title">chosen option: {{item}}, {{item2}}</h1>    </ion-header-bar>    <ion-content> <ion-list>   <ion-radio ng-repeat="i in items" ng-value="i.id" ng-model="item.itemval" >{{i.name}}</ion-radio> </ion-list> <ion-list>   <ion-radio ng-repeat="i in items2" ng-value="i.id" ng-model="item2.itemval" >{{i.name}}</ion-radio> </ion-list>   </ion-content> </ion-view> 

from controller javascript file:

.controller("mainctrl", function($scope) {   $scope.items = [     { id: 1, name: "test 1", value: "t1" },     { id: 2, name: "test 2", value: "t2" },     { id: 3, name: "test 3", value: "t3" }   ];    $scope.items2 = [     { id: 4, name: "test 4", value: "t4" },     { id: 5, name: "test 5", value: "t5" },     { id: 6, name: "test 6", value: "t6" }   ];    $scope.item = { itemval: "2" };   $scope.item2 = { itemval: "4" }; }); 

you need set name property on ion-radio denote belong different group.

make these changes in app.html make work:

<ion-view view-title="radio button demo">   <ion-header-bar align-title="left" class="bar-positive">     <h1 class="title">chosen option: {{item}}, {{item2}}</h1>   </ion-header-bar>     <ion-content>     <ion-list>       <ion-radio ng-repeat="i in items" ng-value="i.id" ng-model="item.itemval" name="group1">{{i.name}}</ion-radio>     </ion-list>     <ion-list>       <ion-radio ng-repeat="i in items2" ng-value="i.id" ng-model="item2.itemval" name="group2">{{i.name}}</ion-radio>     </ion-list>   </ion-content> </ion-view> 

edited plunker here: http://plnkr.co/edit/8iu4xskzoiowcnscprhh?p=preview


Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -