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 を使用する最初の日なので、忘れていた単純なものがあることを願っています。これは簡単に修正できます。私は何を間違っていますか?