Angular JS 文档说 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 中查看:
在 IE 9 中查看:
请注意,复选框按预期禁用输入。只是索引坏了。今天是我使用 Angular JS 的第一天,所以我希望我忘记了一些简单的事情,这是一个简单的修复。我究竟做错了什么?