选中复选框时显示一条消息，取消选中它时显示另一条消息

Question

我是 Javascript/AngularJS 的新手，想用它来学习/理解这些语言。在 Angular 网站上有一些基本的待办事项列表脚本，我想稍微改动一下。我已经把它变成了我需要学习的东西的清单。当我选中复选框时，我得到了一点消息，比如“干得好！”。但是当我取消选中它时，会弹出相同的消息，并且我想更改为“你确定吗？”。

我花了几个小时寻找答案，但找不到答案，所以我希望有人能帮助我弄清楚如何做到这一点。这是我的代码：

HTML：

      <div ng-controller="TodoListController as todoList">
        <span>Nog {{todoList.remaining()}} van de {{todoList.todos.length}} te gaan!</span>
        <!--[ <a href="" ng-click="todoList.archive()">archive</a> ]-->
        <ul class="unstyled">
          <li ng-repeat="todo in todoList.todos">
            <label class="checkbox">
              <input type="checkbox" onclick="alert('Well done!')" ng-model="todo.done">
              <span class="done-{{todo.done}}">{{todo.text}}</span>
            </label>
          </li>
        </ul>
      </div> <!--einde ng-controller -->

AngularJS 代码：

todoList.remaining = function() {
  var count = 0;
  angular.forEach(todoList.todos, function(todo) {
    count += todo.done ? 0 : 1;
  });
  return count;
};

todoList.archive = function() {
  var oldTodos = todoList.todos;
  todoList.todos = [];
  angular.forEach(oldTodos, function(todo) {
    if (!todo.done) todoList.todos.push(todo);
  });
};

如果有什么遗漏，请告诉我！ 提前致谢！

Answer 1

这是为您更新的代码：

<div ng-controller="TodoListController as todoList">
        <span>Nog {{todoList.remaining()}} van de {{todoList.todos.length}} te gaan!</span>
        <!--[ <a href="" ng-click="todoList.archive()">archive</a> ]-->
        <ul class="unstyled">
          <li ng-repeat="todo in todoList.todos">
            <label class="checkbox">
              <input type="checkbox" onclick="showAlert(todo.done)" ng-model="todo.done">
              <span class="done-{{todo.done}}">{{todo.text}}</span>
            </label>
          </li>
        </ul>
      </div> <!--einde ng-controller -->

AngularJs 代码：

todoList.remaining = function() {
  var count = 0;
  angular.forEach(todoList.todos, function(todo) {
    count += todo.done ? 0 : 1;
  });
  return count;
};

  $scope.showAlert = function(isSuccess){
               if(isSuccess)
                  alert('Well done!')
               else
                 alert('Unchecked')
                };
todoList.archive = function() {
  var oldTodos = todoList.todos;
  todoList.todos = [];
  angular.forEach(oldTodos, function(todo) {
    if (!todo.done) todoList.todos.push(todo);
  });
};