在IE 9中,重复$ index未正确显示

时间:2013-08-23 22:28:23

标签: internet-explorer angularjs angularjs-ng-repeat

Angular JS docs表示ngRepeat指令应该将$ index变量设置为数组中的项索引。这在Chrome和IE 10中运行良好,但IE 9显示“{{$ index}}”而不是数字。这是一个小例子:

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title>Host Parameters</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <style>
        .host-param-table {
            border-collapse: collapse;
        }
        .host-param-table td, .host-param-table th {
            border: 1px solid gray;
            text-align:center;
            padding: 2px;
            font-size: 15px;
            font-family: Arial;
        }
    </style>
</head>
<body id="ng-app" data-ng-app>
<div data-ng-controller="HostParametersCtrl">
    <table class="host-param-table">
        <tr>
            <th>Name</th>
            <th>Index</th>
            <th>On</th>
            <th>Value (Hex)</th>
            <th>Value (Output)</th>
        </tr>
        <tr data-ng-repeat="p in params">
            <td>{{p.name}}</td>
            <td>{{$index}}</td>
            <td><input data-ng-model="p.isEnabled" type="checkbox" /></td>
            <td><input data-ng-model="p.value" data-ng-disabled="!p.isEnabled" type="text" /></td>
            <td>0x{{p.value}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    function HostParametersCtrl($scope) {
        $scope.params = [
            { 'isEnabled': false, 'name': 'First', 'value': '' },
            { 'isEnabled': false, 'name': 'Second', 'value': '' },
            { 'isEnabled': false, 'name': 'Third', 'value': '' },
            { 'isEnabled': false, 'name': 'Fourth', 'value': '' },
            { 'isEnabled': false, 'name': 'Fifth', 'value': '' },
            { 'isEnabled': false, 'name': 'Sixth', 'value': '' },
            { 'isEnabled': false, 'name': 'Seventh', 'value': '' }
        ];

    }
</script>
</body>
</html>

在Chrome 29中查看:

Chrome

在IE 9中查看:

Internet Exploiter 9

请注意,复选框会按预期禁用输入。这只是指数被打破了。今天是我使用Angular JS的第一天,所以我希望有一些简单的事情我忘了,这是一个简单的解决方案。我做错了什么?

1 个答案:

答案 0 :(得分:1)

我在这里用你的代码创建了一个plunkr:http://plnkr.co/edit/ajHZ04yqnBmKHUicWmgb?p=preview - 我修改了一下。

当我使用IE在我的本地PC上查看相同的代码库时,它在IE8,9和10中运行相同。它在IE7中根本不运行。

不幸的是,我不认为plunkr支持IE8或9,所以只需将代码粘贴到您的文件中,看看它是否有所作为。