3

我确实遵循了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;}
4

1 回答 1

1

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

查看更新的 jsfiddle

<form>angular elements here</form>
于 2012-12-19T01:53:45.710 回答