Javascript 在Angular JS中默认选中自定义单选按钮组件
我正在使用angular js为单选按钮创建一个自定义组件。一切正常,只是我无法设置默认选中的所需单选按钮 我的代码如下 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.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;
}
}