如何使 AngularJS TODO 示例在 IE9 中的工作与在 IE8、Chrome、Firefox 中的工作相同？答案

【问题标题】：How to make AngularJS TODO example work in IE9 the same as it works in IE8, Chrome, Firefox?如何使 AngularJS TODO 示例在 IE9 中的工作与在 IE8、Chrome、Firefox 中的工作相同？
【发布时间】：2014-04-30 01:06:18
【问题描述】：

我确实遵循了 Angular JS TODO 示例，并将我的代码发布在 JSFiddle 上（使用 AngularJS v1.0.3）： http://jsfiddle.net/7w689/

我无法弄清楚为什么它不能按预期在 IE9 中运行。它适用于 IE8、Chrome 和 Firefox，但在 IE9 中的行为有所不同，如下所述。

在 IE8、Chrome 和 Firefox 中观察到的行为： 首次加载页面时，单击 TODO 列表中的任何 TODO 复选框将修改 TODO 项的 CSS 类（.done-true 与 .done-false），并将更新“剩余待办事项”编号。

在 IE9 中观察到的行为： 首次加载页面时，单击 TODO 列表中的任何 TODO 复选框将不会修改 TODO 项的 CSS 类（.done-true 与 .done-false），并且不会更新“剩余的待办事项”编号。只有在列表中的每个项目被选中和取消选中多次后，它才会开始工作。不清楚为什么会发生这种情况以及如何使其在 IE9 中的行为与 IE8 和其他浏览器中的行为相同。

可以通过使用 IE9 中的开发工具并选择浏览器模式：IE9、文档模式：IE9 标准（相对于文档模式：IE8 标准）来重现此行为。

HTML：

<div ng-app>        
<div ng-controller="TodoCtrl">

    <span>Total number of todos: {{todos.length}}</span><br />
    <span>Remaining todos: {{(todos | filter: {done: false} ).length}}</span><br />

    <ul>
        <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done" id="chk{{$index}}"/> 
            <label for="chk{{$index}}" ng-class="{'done-true': todo.done, 'done-false': !todo.done}">
                {{todo.text}} | {{todo.done}}
            </label>
        </li>
    </ul>

    <form>
        <input type="text" ng-model="todoText" 
               size="30" placeholder="add new todo here"/>
        <button ng-click="addTodo()">Add</button>
    </form>

</div>
</div>

JS：

function TodoCtrl($scope) {

    $scope.todos = [
        { text: 'task 1', done: true },
        { text: 'task 2', done: false }
    ];

    $scope.addTodo = function ()
    {
        $scope.todos.push({ text: $scope.todoText, done: false });
        $scope.todoText = "";
    };

}

CSS：

.done-true {text-decoration: line-through;  color: grey;}
.done-false {text-decoration: none;  color: red;}

【问题讨论】：

标签： internet-explorer angularjs

【解决方案1】：

由于某种原因，您需要在表单标签中包含绑定元素，否则它们只会在您与它们交互后更新。

See updated jsfiddle

<form>angular elements here</form>

【讨论】：