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):
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
Post a Comment