1

angular jsを使用してラジオボタンのカスタムコンポーネントを作成しています。デフォルトでチェックされている希望のラジオボタンを設定できないことを除いて、すべて正常に動作します。

私のコードは次のとおりです

JS コンポーネント 

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

}

任意の提案をいただければ幸いです。前もって感謝します。

4

0 に答える 0