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)、「残りの todos」の数が更新されます。 .

IE9 で観察された動作: ページが最初に読み込まれるときに、TODO リストの TODO チェックボックスをクリックしても、TODO 項目の CSS クラスは変更されず (.done-true と .done-false)、「残りの todos」番号は更新されません。リスト内の各項目が数回チェックおよびチェック解除された後にのみ、機能が開始されます。なぜこれが起こっているのか、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

何らかの理由で、バインドされた要素を form タグ内に配置する必要があります。そうしないと、要素を操作した後にのみ更新されます。

更新された jsfiddle を参照してください

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