4

我在角度控制器中有以下数据列表。

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

我用三个单选按钮在每一行中显示数据，以便用户可以更新操作值。

<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 中运行。问题是 IE6 不允许name在 DOM 中创建单选按钮后更改属性。因此name="action-{{data.id}}"将保持所有单选按钮属于一个逻辑组。

有什么解决办法吗？我正在考虑编写一个在 DOM 中name创建之前生成属性的指令。radio是否可以使用指令？如果是这样，请帮助我。

4

2 回答 2

2

这是我解决它的方法。（代码可以更简洁，但这是基本思想。）

我使用了spanwithmy-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 回答
0

我认为您可以使用{{$index}}而不是{{data.id}} for name="action-{{data.id}}"因为 $index 会自动更改每个元素，并且您将拥有动态名称。试试这个作为使用指令的替代方法，它解决了我的案例中的问题。

于 2017-11-01T07:11:35.353 回答