Erratic Radio Button with Angular with iCheck

Question

I have a radio button

<ul class="data-list-2" style="margin-left: 15px;">
    <li>
        <input name="rate" type="radio" class="required" value="Stucture" ng-model="contact.package">
        <label>Structuring and Drafting Plan</label>
    </li>
    <li>
        <input name="rate" type="radio" class="required" value="Implement" ng-model="contact.package">
        <label>Implementing and Managing Plan</label>
    </li>
    <li>
        <input name="rate" type="radio" class="required" value="both" ng-model="contact.package">
        <label>Both</label>
    </li>
</ul>

The problem is when I click the radio button it get checked but doesn't appear on scope variable. When I inspect the element I see the following:

<li>
<div class="iradio_square-aero">
  <input name="rate" type="radio" class="required ng-pristine ng-untouched ng-valid" value="both" ng-model="contact.package" style="position: absolute; opacity: 0;">
  <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div>
  <label>Both</label></li>

Also, I found out that page is using

<!-- Radio and checkbox styles -->
<script src="check_radio/jquery.icheck.js"></script>

Please Guide how to pass the radio value to angular.

What are you using beyond raw HTML to turn your original markup into something containing `` etc? Is it some jQuery plugin? That may be what is causing your problem, so please include details of it in the question. — GregL, Aug 04 '15 at 06:49
Additionally, to get the behaviour people expect for a label (clicking it checks the corresponding radio button), you should set the `for` attribute of the label to match the (unique) `id` of the radio input; OR you can just put the `` _inside_ the `` start and end tags (before the label text). — GregL, Aug 04 '15 at 06:51
@GregL: I checked this http://stackoverflow.com/questions/19346523/integration-of-angular-and-jquery-icheck-by-using-a-directive-is-not-working but this is also not working. Any suggestions — Siddharth Srivastva, Aug 04 '15 at 07:18
See [this GitHub issue](https://github.com/fronteed/icheck/issues/62) for hints on how to make an angular directive to enable iCheck to play nicely with angular. Then add the `i-check` attribute to your `` and remove the default iCheck functionality that is adding it to all radio buttons automatically. — GregL, Aug 04 '15 at 07:54
@GregL: I am unable to get this working. If I do so my radio buttons disappear. If you can guide me a bit more — Siddharth Srivastva, Aug 04 '15 at 19:47

score 0 · Answer 1 · answered Aug 04 '15 at 06:50

0

If it not come on scope put anywhere check once{{contact.package}} (or) put {{$scope.contact.package}}

answered Aug 04 '15 at 06:50

Srikanth Pullela

241
1
12

`{{$scope.contact.package}}` will not work, because the current scope is not populated as a property called `$scope` on itself. The expression between the {{double curly brackets}} is evaluated against the current scope at that point. You can think of it as treating the current scope as the global scope for that expression. – GregL Aug 04 '15 at 06:53

score 0 · Answer 2 · edited May 23 '17 at 12:21

Your radio button's value will be available on whatever scope property you've assigned ng-model="" to on the input element. Try something like this:

JS

app.controller('MyCtrl', function($scope){ 
   $scope.submitForm = function (){
       alert($scope.radioValue):
   };

   $scope.radioValue = 1;
});

HTML

<form name="myForm" ng-controller="MyCtrl" ng-submit="submitForm()">
   <label><input type="radio" name="test" ng-model="radioValue" value="1"/> One</label>
   <label><input type="radio" name="test" ng-model="radioValue" value="2"/> Two</label>
   <label><input type="radio" name="test" ng-model="radioValue" value="3"/> Three</label>
   <div>currently selected: {{radioValue}}</div>
   <button type="submit">Submit</button>
</form>

check out this link : How can I get the value of the checked radio button when submitting a form using angularjs?

Erratic Radio Button with Angular with iCheck

2 Answers2