角度自定义单选按钮组件中的值不绑定

I have created a custom radio button component in angular js which will be used across my application. following is the code i wrote for the component.

我已经在角度js中创建了一个自定义单选按钮组件,它将在我的应用程序中使用。以下是我为组件编写的代码。

angular.module("customComponent")
    .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;
            console.log($ctrl.checked);  // Data is binding properly at this stage
        }
    });

HTML

    <div data-ng-repeat="radio in vm.radioValues">
         <ng-radiobutton label="radio.label " group="group1 " checked="radio.checked"></ng-radiobutton>
    </div>

JSON

    vm.radioValues = [{ label: 'Value1', checked: true },
        { label: 'Value2', checked:false }
    ];

The issue i am facing is that the true and false value which i am setting is not getting bind with the component. by default both the radio button is unchecked. Can anyone tell me what is wrong with my code.

我面临的问题是我设置的真假值没有与组件绑定。默认情况下,单选按钮都未选中。任何人都可以告诉我我的代码有什么问题。

Thanks in advance

提前致谢

2 个解决方案

#1

It seems like you try to have the Checkbox behavior for Radio button. (It is not really a binding problem)

看起来你试图让单选按钮的Checkbox行为。 (这不是一个真正的约束性问题)

Here is a valid version of what you can have :

这是您可以拥有的有效版本:

angular.module("customComponent", [])
    .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" value="{{$ctrl.label}}" />' +
             '  <div class="ng-control-indicator-radio"></div>' +
             '</label>' +
             '',       

        bindings: {
            label: '=?',
            checked: '=',
            group: '@'
        },
        controller: function () {
            var $ctrl = this;
            console.log($ctrl.checked);  // Data is binding properly at this stage
        }
    });

angular.module("customComponent").controller('Ctrl', function($scope) {
  $scope.group = {value: 'Value2' };
  
  $scope.radioValues = [
      { label: 'Value1' },
      { label: 'Value2' }
    ];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="customComponent">
  <div ng-controller="Ctrl">
    <div data-ng-repeat="radio in radioValues">
         <ng-radiobutton label="radio.label" group="group1" checked="group.value"></ng-radiobutton>
    </div>
  </div>
 </div>

#2

That's because boolean values in javascript are passed by value, and not by reference. To solve this issue, simply pass an object instead of the pure boolean value:

那是因为javascript中的布尔值是按值传递的,而不是通过引用传递的。要解决此问题,只需传递一个对象而不是纯布尔值:

<ng-radiobutton label="radio.label " group="group1 " checked="radio"></ng-radiobutton>

and your component template to:

和您的组件模板:

<input type="radio" name="{{$ctrl.group}}" data-ng-model="$ctrl.checked.checked"/>' +

#1