未定義角度自定義單選按鈕組件中的值

我已經在角度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 and false我設置的值沒有與組件綁定。默認情況下，這個單選按鈕沒有被選中。任何人都可以告訴我我的代碼有什麼問題。

在此先感謝

來源

2016-10-07 Shareer

標籤值是越來越綁定？ @Shareer – Aparna

是的。一切工作完美@Aparna – Shareer

好像你試圖對單選按鈕的複選框的行爲。（這是不是一個真正的綁定問題）

這裏是你能有什麼有效的版本：

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>

來源

2016-10-07 09:35:22

這是因爲在JavaScript布爾值按值傳遞，而不是參照。爲了解決這個問題，只需通過一個對象，而不是純粹的布爾值：

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

和你的組件模板：

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

來源

2016-10-07 09:12:57 Luxor001

我已經改變了你提到的代碼，但不幸的是我仍然有問題@ Luxor001 – Shareer

console.log（$ ctrl.checked.checked）產生了什麼？ – Luxor001

未定義角度自定義單選按鈕組件中的值

回答

相關問題