Значение не привязано в угловом компоненте настраиваемой радиокнопки

Я создал настраиваемый компонент переключателя в angular js, который будет использоваться во всем моем приложении. Ниже приведен код, который я написал для компонента.

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

Проблема, с которой я столкнулся, заключается в том, что значения true и false, которые я устанавливаю, не связываются с составная часть. по умолчанию оба переключателя не отмечены. Может ли кто-нибудь сказать мне, что не так с моим кодом.

заранее спасибо


javascript angularjs radio-button angular-components angular-directive
person Shareer    schedule 07.10.2016    source источник
comment
значение метки привязано? @Shareer   -  person random    schedule 07.10.2016
comment
да. все остальное работает отлично @Aparna   -  person Shareer    schedule 07.10.2016

Ответы (2)


arrow_upward
1
arrow_downward

Похоже, вы пытаетесь настроить поведение флажка для переключателя. (На самом деле это не проблема привязки)

Вот действующая версия того, что у вас может быть:

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>

person Steeve Pitis    schedule 07.10.2016

arrow_upward
0
arrow_downward

Это потому, что логические значения в javascript передаются по значению, а не по ссылке. Чтобы решить эту проблему, просто передайте объект вместо чистого логического значения:

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

и ваш шаблон компонента:

<input type="radio" name="{{$ctrl.group}}" data-ng-model="$ctrl.checked.checked"/>' +
person Luxor001    schedule 07.10.2016
comment
я изменил код, как вы упомянули, но, к сожалению, у меня все еще есть проблема @ Luxor001 - person Shareer; 07.10.2016
comment
что дает console.log ($ ctrl.checked.checked)? - person Luxor001; 07.10.2016