Radio button not working in IE7

[Munim]

Hi,

<input type="radio" /> binding is not working in IE7 but works fine from IE8 and above and definitely on other browsers.

I have taken radio jsFiddle examples from https://github.com/angular/angular.js/wiki/JsFiddle-Examples

• Forms - Selects (0.10.7, Vojta Jina) - http://jsfiddle.net/cambiata/5wa2M
• Forms - Radio inputs (0.10.7, Vojta Jina) - http://jsfiddle.net/cambiata/ezzHD

Can you guys way what's wrong here or any workaround for this problem?

TIA,

Regards,
Munim

[Dan Doyon]

Hi Munim,

In case you haven't seen this in doc I would start here. http://docs.angularjs.org/guide/ie . I can't speak for core devs, but I do know that IE7 was becoming quite a burden for them during development. they went to great lengths to put in things into angular to make it ie7 play nice. 

I feel for you if you must support IE7

--dan

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Anders Hessellund Jensen]

The problem is that in IE7 it is not possible to dynamically set the name property of input elements.

The workaround is to assign a unique name property to each radio input element.

This info should be added to docs.

[Anders Hessellund Jensen]

Scratch that. The workaround does not work.

[Munim Abdul]

Thanks Anders,

I have tried this, but it's not working in IE7

      <label ng-repeat="answer in model.answers">
        <input type="radio" name="answer" value="{{answer.id}}" ng-model="model.selectedAnswer" /> {{answer.displayText}}
      </label>

Munim

--

[Anders Hessellund Jensen]

Here is a fix that work, but you need to fix it in angularjs. 

In the function function radioInputType(scope, element, attr, ctrl), change

attr.value to element[0].value

You need to change this in two places. The line   attr.$observe('value', ctrl.$render) probably also does not work in IE7, but it is not relevant unless the value of each input element changes.

I'll submit a bug report when I have some time available.

On Saturday, August 11, 2012 9:58:59 PM UTC+2, Munim wrote:

[Iwan van Staveren]

Hi, 

I have the same problem in IE7, and your fix is working fine. Did you already submit the bug? (I could nog find it.)

Else I am happy to do it for you.

KInd regards,

Iwan

[j...@cooperplanet.com]

Did either of you ever report this?

[Eamonn Swanton]

 Hi, after fixing angularjs as per Anders kind post, I found in IE7 although Anders code worked when listing several radio inputs with a text name, when doing an ng-repeat on a radio button using a name and value derived from a scoped object that the radio input still didn't work correctly. However by adding a directive for name (eg. test-name) and value  (eg. text-value) in the template and setting the name property and value property in the directive from my object, it worked correctly. It needed Anders fix as well though.

[Владислав Новак]

Also after element.bind('click', function() { put the string element[0].checked = true;

[domi...@winautomation.com]

Late joining in this conversation ...

I noticed that angular js 1.1.5 still can't cope with the quirks of IE7 and after weighting in all available options I ended up using the following (hackish) approach, that is based on ng-click, as a blanket-workaround for radiobutton groups across all versions of IE:

<label ng-repeat='option in field.options'>

          <input type='radio' ng-checked='option == field.value' ng-click='field.value = option' name='{{field.name}}_selection' value='{{option}}' style='width:{{field.width}}px' />

          {{option}}

</label>

If you can spot any errors in this approach feel free to point them out. Hope it proves useful nevertheless.

Cheers,

Dominick

[Jon Elling]

This worked for me. Thanks.

[Dmitry Koval]

You can try to use ng-attr-value attribute instead of just value attribute of radio button:

<input type="radio" name="answer" ng-attr-value="{{answer.id}}" ng-model="model.selectedAnswer" /> {{answer.displayText}}

It works fine in IE7

[Sultan Sallaj]

This was the first I heard about it.. I tried ng-value, tried regular value.. but ng-attr-value... this one worked! Thanks!

Perhaps this should be mentioned in the angular docs in the radio button section? Can't see why not..