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

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

See updated jsfiddle

<form>angular elements here</form>

如何使IE9中的AngularJS TODO示例与IE8，Chrome，Firefox中的相同？

1 个答案: