CODEWITHSUNDEEP
javascripthtmlangularjs
Bilal
Bilal

Reputation: 2740

Creating radio with dynamic name in Angular for IE6

I have following data list in angular controller.

$scope.dataList = [
    {id:1, name:"Record A", action:"A"},    //action : A = Authorized
    {id:2, name:"Record B", action:"R"},    //action : R = Rejected
    {id:3, name:"Record C", action:"P"},    //action : P = Pending
    {id:4, name:"Record D", action:"A"},    
    {id:5, name:"Record E", action:"R"},    
    {id:6, name:"Record F", action:"A"} 
];

I have displayed data in each row with three radio buttons so user can update action value.

<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Pending</th>
            <th>Authorize</th>
            <th>Reject</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="data in dataList">
            <td ng-bind="data.name"></td> 
            <td><input type="radio" name="action-{{data.id}}" ng-model="data.action" ng-value="'P'"></td>
            <td><input type="radio" name="action-{{data.id}}" ng-model="data.action" ng-value="'A'"></td> 
            <td><input type="radio" name="action-{{data.id}}" ng-model="data.action" ng-value="'R'"></td>
        </tr>
</tbody>
</table>

User Preview

For logical grouping of radio buttons, i have used name="action-{{data.id}}" for separate radio button sets for each row. As data.id is unique for each record, so in each row, radio buttons will have same name and hence same logical group.

It works in modern browser but, unfortunately, i have to make it work in IE6. The problem is IE6 do not allow to change the name attribute once radio button is created in DOM. So name="action-{{data.id}}" will remain as it is resulting all radio buttons belong one logical group.

Is there any solution? I am thinking about writing a directive that generates name attribute before creating radio in DOM. Is it possible by using directive? If so, please help me.

Upvotes: 4

Views: 1600

Answers (2)

Mjay99
Mjay99

Reputation: 29

I think u can use {{$index}} instead of {{data.id}} for name="action-{{data.id}}" as $index will automatically change for each element and u will have dynamic name. Try this as alternative to using Directive,It solved Problem in my Case.

Upvotes: 0

Bilal
Bilal

Reputation: 2740

Here is how I resolved it. (Code can be more cleaner, but this is the basic idea.)

I used a span with my-radio directive and listed other required attributes on it. 

...
<td><span my-radio="data.id" my-model="data.action" my-value="'P'"></span></td>
<td><span my-radio="data.id" my-model="data.action" my-value="'A'"></span></td>
<td><span my-radio="data.id" my-model="data.action" my-value="'R'"></span></td>
...

Here is myRadio directive code.

myModule.directive('myRadio', ['$compile',function($compile) {
    return function(scope, element, attrs) {
        var input = '<input type="radio" name="action-'+ scope.$eval(attrs.myRadio) +'" ng-model="' + attrs.myModel + '" ng-value="' + attrs.myValue + '">';
        element.html(input);
        $compile(element.contents())(scope);
    };  
}]);

This will generate following code for each row. Here name attribute is being generated by "action" + data.id expression.

...
<td>
    <span my-value="'P'" my-model="data.action" my-radio="data.id">
        <input type="radio" ng-value="'P'" ng-model="data.action" name="action-1">
    </span>
</td>

<td>
    <span my-value="'P'" my-model="data.action" my-radio="data.id">
        <input type="radio" ng-value="'A'" ng-model="data.action" name="action-1">
    </span>
</td>

<td>
    <span my-value="'P'" my-model="data.action" my-radio="data.id">
        <input type="radio" ng-value="'R'" ng-model="data.action" name="action-1">
    </span>
</td>
...

Upvotes: 2

Related Questions