I am currently taking my first steps in Ionic, and trying to create an app.
In this example, I have 2 radio button lists (with options 1, 2, 3 and options 4, 5, 6):
I would like both radio buttons 2 and 4 to be checked by default.
Why is only radio button 4 checked?
What am I missing?
Code below.
From the 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 the 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 to set the name
property on the ion-radio
to denote that they belong to different group.
Make these changes in app.html
to make it 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