Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/89.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在Angular JS中默认选中自定义单选按钮组件_Javascript_Html_Angularjs_Angular Directive_Angular Components - Fatal编程技术网

Javascript 在Angular JS中默认选中自定义单选按钮组件

Javascript 在Angular JS中默认选中自定义单选按钮组件,javascript,html,angularjs,angular-directive,angular-components,Javascript,Html,Angularjs,Angular Directive,Angular Components,我正在使用angular js为单选按钮创建一个自定义组件。一切正常,只是我无法设置默认选中的所需单选按钮 我的代码如下 JS组件 angular.module("customButtons") .component("ngRadiobutton", { template: '<label class="ng-control-radio-button">' + '<span data-n

我正在使用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;
        }
    });
}


如有任何建议,将不胜感激。提前谢谢。

您能分享一个JSFIDLE或一些我们可以玩的东西吗?请参阅这里。。。[你能分享一个JSFIDLE或一些我们可以玩的东西吗?请参考这里[
<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>
.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;
     }
 }