4

angularコントローラーには次のデータリストがあります。

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

ユーザーがアクション値を更新できるように、3 つのラジオ ボタンを使用して各行にデータを表示しました。

<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>

ユーザープレビュー

ラジオ ボタンを論理的にグループ化name="action-{{data.id}}"するために、行ごとに個別のラジオ ボタン セットを使用しました。はレコードごとに一意であるためdata.id、各行のラジオ ボタンには同じ名前が付けられ、したがって同じ論理グループが付けられます。

最新のブラウザーで動作しますが、残念ながら IE6 で動作させる必要があります。name問題は、ラジオ ボタンが DOM で作成されると、IE6 では属性を変更できないことです。name="action-{{data.id}}"結果として、すべてのラジオ ボタンが 1 つの論理グループに属するため、残ります。

解決策はありますか？DOMでname作成する前に属性を生成するディレクティブを書こうと考えています。radioディレクティブを使用して可能ですか？もしそうなら、私を助けてください。

4

2 に答える 2

2

これが私がそれを解決した方法です。(コードはもっときれいにできますが、これが基本的な考え方です。)

spanwithディレクティブを使用し、my-radioその他の必要な属性をリストしました。

...
<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>
...

これがmyRadioディレクティブ コードです。

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

これにより、各行に対して次のコードが生成されます。ここでは、式nameによって属性が生成されてい"action" + data.idます。

...
<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>
...
于 2013-09-08T05:20:53.440 に答える