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

Question

我对 Javascript/AngularJS 相当陌生，想用它来学习/理解这些语言。在 Angular 网站上有一些基本的待办事项列表脚本，我想稍微更改一下。我把它变成了我需要学习的事情 list 。当我选中该复选框时，我收到一条消息，例如“干得好!”。但是当我取消选中它时，会弹出相同的消息，我想更改为“你确定吗？”之类的内容。

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

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);
  });
};