Ionic radio group on new page component

Question

I'm new to ionic and angular and I want to create a custom element directive, like:

<radio-group 
    value="'a'" 
    values="{{['a', 'b', 'c']}}" 
    on-value-change="onChange()" 
    radio-group-name="'Values'"
></radio-group>

function onChange(newValue){}

so it's pretty similar to example on ionic site, but I need it to generate link

<a href="#/radio-group-page">Values</a>

by clicking it we are going on a new page with values list and 'Values' title. When we select new item, on-value-change event fires.

Is it possible? I don't know how to bind this functionality between pages.

I dont want to create new template and controller for each radio-group.

you want dynamic radio button list. So if it clicks on section 1 >> it displays radio-button based on section 1? — Smit
I click on link on page 1, then go to page 2. On page 2 there is a list of radio buttons (a, b, c). When I click on another item and press 'done' on-value-change event fires on page 1. — Artem Svirskyi
section 1 is just a header name. I gave a sample in order to understand your question correctly — Smit

Smit Smit · Accepted Answer · 2016-08-14T15:07:17

According to me for a newbie best would be to set a factory!

myApp.factory('Data', function(){
        var data =
            {
                valueSelected: ''
            };

        return {
            getValue: function () {
                return data.valueSelected;
            },
            setValue: function (selected) {
                data.valueSelected = selected;
            }
        };
    });

In your radio controller:

myApp.controller('RadioCtrl', function( $scope, Data ){
    Data.setValue($scope.radioValue);
});

In your main Controller

myApp.controller('mainCtrl', function( $scope, Data ){
    var valueReceived = Data.getValue();
    //do what you want with your data!
});

Ionic radio group on new page component

1 Answers