AngularJS input.radio initial selection

Question

I'm trying to initialise/select a particular radio button within a group. I want to pass in an index number to an attribute called "selected-item".

HTML

<div class="top">
    <radio-buttons model="colour" selected-item="1" items='colours'></radio-buttons>
    <div>{{colour}}</div>
</div>

<div class="center">
    <radio-buttons model="day" selected-item="2" items='days'></radio-buttons>
    <div>{{day}}</div>
</div>

<div class="bottom">
     <radio-buttons model="phone" selected-item="3" items="phones"></radio-buttons>
     <div>{{phone}}</div>
</div>

Directive:

directives.directive('radioButtons', function () {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            items: '=',
            selectedItem: '@'
        },
        templateUrl: 'template/radio-group.html',
        link: function(scope) {
            console.log(scope.selectedItem);
            scope.onItemChange = function(item) {
                console.log(item);
                scope.model = item;
            };
        }
    };
});

Template: radio-group.html:

<div ng-repeat='item in items'>
    <input
       type="radio"
       name="{{item.group}}"
       ng-value="{{item.value}}"
       ng-model="model"
       ng-change="onItemChange(item)"/>
       {{item.text}}
</div>

Controller

$scope.colours= [ {
    text: "Pink",
    value: 5,
    group: "colourGroup",
    img: 'app/img/icon.jpg'
}, {
    text: "Yellow",
    value: 6,
    group: "colourGroup",
    img: 'app/img/icon.jpg'
}, {
    text: "Blue",
    value: 7,
    group: "colourGroup",
    img: 'app/img/icon.jpg'
}, {
    text: "Green",
    value: 8,
    group: "colourGroup",
    img: 'app/img/icon.jpg'
}
];

$scope.days = [ {
    text: "Monday",
    value: 9,
    group: "dayGroup"
    }, {
    text: "Tuesday",
    value: 10,
    group: "dayGroup"
    }, {
    text: "Wednesday",
    value: 11,
    group: "dayGroup"
    }, {
    text: "Thursday",
    value: 12,
    group: "dayGroup"
    }
];

$scope.phones = [ {
    text: "Android",
    group: "phoneGroup",
    value: 13
}, {
    text: "iOS",
    group: "phoneGroup",
    value: 14
}, {
    text: "Blackberry",
    group: "phoneGroup",
    value: 15
}];

Any help would be fantastic!

Cheers.

tasseKATT · Accepted Answer · 2014-02-13 18:07:13Z

2

Try changing ng-value="{{item.value}}" to value="{{item.value}}".

Then add ng-checked="$index == (selectedItem - 1)" to the input in the template.

Alternatively: ng-checked="$index == (selectedItem - 1) || $first" or with $last, if you want it to select something if you try an index that is out of range.

answered Feb 13, 2014 at 18:07

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3034151 Over a year ago

I've taken your first option and it works fine. Thank you very much.

koolunix · Accepted Answer · 2014-02-13 21:40:17Z

0

Without using value, here is another solution:

link: function(scope) {
    scope.model = angular.copy(scope.items[scope.selectedItem -1]);
    var setSelected = function(v) {
        var i = 0;
        for(; i < scope.items.length;i++) {
            if(scope.items[i].value === v) {
                return scope.items[i];
            }
        }
    }

    scope.$watch('model.value',function(v) {
        //because the value is out of sync with the model, have to reset the model      
        scope.model = angular.copy(setSelected(v));
    });
}

Note that ng-value has to be a string, and therefore ng-model. scope.model is only exposed as scope in your directive, so am using scope.model.value

<div ng-repeat='item in items'>
    <input
       type="radio"
       name="{{item.group}}"
       ng-value="{{item.value}}"
       ng-model="model.value" />
       {{item.text}} 
</div>

answered Feb 13, 2014 at 21:40

koolunix

1,99516 silver badges25 bronze badges

1 Comment

user3034151 Over a year ago

I have gone with tasseKATT reply below as it's a lot less code and clearer. Thank you for replying it's very much appreciated.

Collectives™ on Stack Overflow

AngularJS input.radio initial selection

HTML

Directive:

Template: radio-group.html:

Controller

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

Directive:

Template: radio-group.html:

Controller

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related