CODEWITHSUNDEEP
angularjsangularjs-directive
Coder
Coder

Reputation: 223

custom directive for radio buttons in angular js

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

Upvotes: 0

Views: 3165

Answers (2)

Vinko Bradvica
Vinko Bradvica

Reputation: 466

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>

Upvotes: 1

Pranay Dutta
Pranay Dutta

Reputation: 2589

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);
    }
  }
});

Upvotes: 1

Related Questions