Partage

checkbox angular

1 2 >>

16 mars 2017 à 19:10:22

Bonjour,

je ne comprends pas car le code que je vais vous donner donne ceci : il y a une checkbox et un bouton "tout cocher" et, qd on coche le bouton "tout cocher" les éléments de la checkbox ne st pas cochés mais par contre qd on décoche "tt cocher", ils se cochent :

voici le code :

index.html :

<!DOCTYPE html>
<html lang="fr" ng-app="demoApp">
    <head>
        <meta charset="utf-8" />
        <title>Todo List</title>
        <link rel="stylesheet" href="web/css/style.css">
        <script src="angular.js"></script>
        <script src="todoList.js"></script>
    </head>
    <body>
        <header>
            <h1>Todo List</h1>
        </header>
        <section ng-controller="todoCtrl">
            <form id="todo-form" ng-submit="addTodo()">
                <input id="new-todo" placeholder="Que devez-vous faire ?" ng-model="newTodo" />
            </form>
            <article ng-show="todos.length">
                <ul id="todo-list">
                    <li ng-repeat="todo in todos" ng-class="{completed: todo.completed}">
                        <div class="view">
                            <input class="mark" type="checkbox" ng-model="todo.completed" />
                            <span>{{todo.title}}</span>
                            <span class="close" ng-click="removeTodo(todo)">x</span>
                        </div>
                    </li>
                </ul>
                <input id="mark-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)" />
                <label class="btn btn-info" for="mark-all">Tout cocher</label>
                <button class="btn btn-danger" ng-click="clearCompletedTodos()">Supprimer les tâches cochées</button>
            </article>
        </section>
    </body>
</html>

todoList.js:

// js/todoList.js
'use strict';

/**
* Déclaration de l'application demoApp
*/
var demoApp = angular.module('demoApp', [
    // Dépendances du "module"
    'todoList'
]);

/**
* Déclaration du module todoList
*/
var todoList = angular.module('todoList',[]);

/**
* Contrôleur de l'application "Todo List" décrite dans le chapitre "La logique d'AngularJS".
*/
todoList.controller('todoCtrl', ['$scope',
    function ($scope) {

        // Pour manipuler plus simplement les todos au sein du contrôleur
        // On initialise les todos avec un tableau vide : []
        var todos = $scope.todos = [];

        // Ajouter un todo
        $scope.addTodo = function () {
            // .trim() permet de supprimer les espaces inutiles
            // en début et fin d'une chaîne de caractères
            var newTodo = $scope.newTodo.trim();
            if (!newTodo.length) {
                // éviter les todos vides
                return;
            }
            todos.push({
                // on ajoute le todo au tableau des todos
                title: newTodo,
                completed: false
            });
            // Réinitialisation de la variable newTodo
            $scope.newTodo = '';
        };

        // Enlever un todo
        $scope.removeTodo = function (todo) {
            todos.splice(todos.indexOf(todo), 1);
        };

        // Cocher / Décocher tous les todos
        $scope.markAll = function (completed) {
            todos.forEach(function (todo) {
                todo.completed = !completed;
            });
        };

        // Enlever tous les todos cochés
        $scope.clearCompletedTodos = function () {
            $scope.todos = todos = todos.filter(function (todo) {
                return !todo.completed;
            });
        };
    }
]);

Pouvez vous m'aider s'il vous plait?

darenju

17 mars 2017 à 0:34:09

Tu as un problème de logique dans ta fonction $scope.markAll. En effet, tu utilises ng-model="allChecked" sur l'input checkbox, puis ta fonction prend en paramètre le nouvel état des cases à cocher. Or, cet état est représenté par l'état de ta checkbox, celle qui utilise ng-model="allChecked". Ta fonction devrait donc ressembler à ça :

$scope.markAll = function () {
    todos.forEach(function (todo) {
        todo.completed = $scope.allChecked;
    });
};

Développeur Front-End freelance disponible pour contrats ! En guerre contre l'utilisation abusive de jQuery.

checkbox angular

checkbox angular

Supprimer

Modérer

Signaler le message aux modérateurs