custom directive for radio buttons in angular js

Question

create the custom directive for radio buttons in angular js

i tried so far

HTML:

  <my-raido></my-raido>
  <my-raido></my-raido>
  <my-raido></my-raido>

Angular js:

var App = angular.module('myRaido',[]);

App.directive('myRaido',function() {

    return {
        restrict : 'E',
        template:  '<div class="myClass"><input type="radio"></div>',
        replace:true,
        link:function (scope, element, attrs) {

            element.click(function () {
                console.log("clicked....");
                // body...
            });

            console.log("link should be work as per our expections...", + attrs.valve);
        }
    }
});

Advance Thanks

it would be better if you could point to an error or let us know what is happening in console or anywhere. — batmaniac7
– batmaniac7, Commented Apr 13, 2015 at 6:01
Hi @maddog, In Template i am taken 3 custom directives (<my-raido></my-raido>), but only one radio button should select right, if suppose one button select reaming two shouldn't selected, but here 3 buttons selected. that is my problem — Coder
– Coder, Commented Apr 13, 2015 at 6:05
every directive has its own scope. i did not get how code achieved the thing you are asking for. I tried a plunker: plnkr.co/edit/YaUTQOHrPudybd69id8P?p=preview Some other error there, i believe. — batmaniac7
– batmaniac7, Commented Apr 13, 2015 at 6:13
Hi @maddog, here where is the radio buttons, i will share my plunker. — Coder
– Coder, Commented Apr 13, 2015 at 6:17

Vinko Bradvica · Accepted Answer · 2015-04-13 06:45:47Z

1

You should set a name attribute on your radio elements to make them a part of a group.

angular.module('app', [])
.directive('myRadio', function() {
    return {
        restrict : 'E',
        template:  '<div class="myClass">\
                      <label>\
                        <input type="radio">\
                        <span></span>\
                      </label>\
                    </div>',
        replace: true,
        link: function (scope, element, attrs) {
            var $radio = element.find('input');
            var $span = element.find('span');

            $radio.attr('name', attrs.group);
            $span.html(attrs.label);
        }
    }
});

If more than one input[radio] controls have a same name, they will behave as a group.

You would use this directive like this:

<my-radio group="group1" label="Option1"></my-radio>
<my-radio group="group1" label="Option2"></my-radio>
<my-radio group="group1" label="Option2"></my-radio>

edited Apr 13, 2015 at 6:45

answered Apr 13, 2015 at 6:39

Vinko Bradvica

4663 silver badges9 bronze badges

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

5 Comments

Coder Over a year ago

Hi @Vinko Bradvica, but it is not working in IE8, do you have any idea, please let me know. Thanks

Vinko Bradvica Over a year ago

Are you sure about IE8? MSDN says it should work for versions after IE7 msdn.microsoft.com/en-us/library/ms534184.aspx

Windows Internet Explorer 8 and later. In IE8 Standards mode, dynamically setting the name attribute on an input type=radio button correctly applies that button to the same named group. For more information about IE8 mode, see Defining Document Compatibility.

Coder Over a year ago

Hi @Vinko Bradvica, i am getting error in console log in IE8, Object expected, Do you have any idea, can please help me this one, Thanks

Vinko Bradvica Over a year ago

I don't have access to the IE8 at the moment, I'll check it out in the evening.

Coder Over a year ago

Hi @Vinko Bradvica , i got the issue, Angular js 1.3 is not supporting IE8, now it is working fine. because i am using Angular JS 1.2. . Thanks for your help. Thank you very much. And one more question, Do you have any idea about how to create Custom Directive for Scroll bar in Angular js, Can Please share your Idea, Please....

Pranay Dutta · Accepted Answer · 2015-04-13 06:31:21Z

1

var App = angular.module('myRaido',[]);

App.directive('myRaido',function() {

return {
    restrict : 'E',
    template:  '<div class="myClass"><input type="radio" name='fooRadios'></div>',
    replace:true,
    link:function (scope, element, attrs) {

        element.click(function () {
            console.log("clicked....");
            // body...
        });

        console.log("link should be work as per our expections...", + attrs.valve);
    }
  }
});

answered Apr 13, 2015 at 6:31

Pranay Dutta

2,5992 gold badges33 silver badges46 bronze badges

4 Comments

Coder Over a year ago

Hi @Pranay Dutta, it is not working, can please give any idea, or share plunker please, Thanks

Pranay Dutta Over a year ago

i just added a name in the template ,i had tried with your plunker it was working f9

Coder Over a year ago

Hi @ Pranay Dutta , can you please share it the plunker

Pranay Dutta Over a year ago

'<div class="myClass"><input type="radio" name="galaba"></div>' add this to your template thats it

Collectives™ on Stack Overflow

custom directive for radio buttons in angular js

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related