1

I am creating a custom component for radio button using angular js. Everything works fine except i am unable to set the desired radio button checked by default.

My code is as follows

JS Component

angular.module("customButtons")
    .component("ngRadiobutton", {
        template:        
             '<label class="ng-control-radio-button">' +
             '<span data-ng-bind="$ctrl.label"></span>' +
             '<input type="radio" name="{{$ctrl.group}}" data-ng-model="$ctrl.checked"/>' +
             '<div class="ng-control-indicator-radio"></div>' +
             '</label>' +
             '',       

        bindings: {
            label: '@',
            checked: '=',
            group: '@'
        },
        controller: function () {
            var $ctrl = this;
        }
    });

HTML

<ng-radiobutton label="Label 1" group="group1"></ng-radiobutton>
<ng-radiobutton label="Label 2" group="group1" checked="true"></ng-radiobutton>
<ng-radiobutton label="Label 3" group="group1"></ng-radiobutton>

SCSS

.ng-control-radio-button{
 position: relative;
 padding-left: 27px;
 cursor: pointer;
 font-size: inherit;
 input[type="radio"]{
     position: absolute;
     z-index: -1;
     opacity: 0;
 }
 .ng-control-indicator-radio {
     position: absolute;
     left: 0;
     background: #fff;
     height: 16px;
     width: 16px;
     box-sizing: border-box;
     top: 50%;
     transform: translateY(-50%);
     font-family: nielsen-icons;
     &:after {
         content: '\e959';  
         color: $input-control-border;
         cursor: pointer;        
     }
 }
 input[type="radio"]:checked ~ .ng-control-indicator-radio {
     &:after {
         content: '\e958';
         color: $color_forest_green;
          font-family: nielsen-icons;
     }
 }

}

Any suggestions will be appreciated. Thanks in advance.

2
  • Could you share a jsfiddle or something we can play with ? Commented Oct 5, 2016 at 9:19
  • Please refer here... [stackoverflow.com/questions/15833692/… Commented Oct 5, 2016 at 9:26

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.