internet-explorer - 如何使 AngularJS TODO 示例在 IE9 中的工作方式与在 IE8、Chrome、Firefox 中的工作方式相同？

Question

我确实按照 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;}

Answer 1

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

See updated jsfiddle

<form>angular elements here</form>