Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567



Using a checkbox to trigger a secondary action (call a function) in Angular – JavaScript – SitePoint Forums

I tried the onchange version, but it’s tripping me up at the moment with a reference error

Uncaught ReferenceError: todos is not defined
at HTMLInputElement.onchange ((index):1)
onchange @ (index):1

I’ve pasted the relevant code below. What am I missing?

###Todos controller

  .controller('ToDosCtrl', ToDosCtrl);

ToDosCtrl.$inject = [`$stateParams`];
function ToDosCtrl($stateParams){
  const vm = this;

  vm.todos = [
    { task: 'Build an awesome todo app', done: false, createDte: new Date('2017-07-05T10:20:05Z'), dueDte: new Date('2017-07-31T23:59:59Z'), completedDte: null },
    { task: 'Get super good at Angular', done: false, createDte: new Date('2017-08-01T12:00:05Z'), dueDte: new Date('2017-08-30T23:59:59Z'), completedDte: null },
    { task: 'Party on code', done: false, createDte: new Date('2017-08-02T14:35:25Z'), dueDte: new Date('2017-08-30T23:59:59Z'), completedDte: null },
    { task: 'Tackle the bonus challenges for this lesson', done: false, createDte: new Date('2017-08-04T18:00:45Z'), dueDte: new Date('2017-08-30T23:59:59Z'), completedDte: null },
    { task: 'Take a nap', done: false, createDte: new Date('2017-08-05T12:00:00Z'), dueDte: new Date('2017-08-30T23:59:59Z'), completedDte: null }

  // RESTful actions
  vm.todosCreate    = todosCreate;
  vm.todosShow      = todosShow;
  vm.todosDelete    = todosDelete;

  // Other functions
  vm.todosCompleted = todosCompleted;
  vm.todosRemaining = todosRemaining;
  vm.updateCompletedDate = updateCompletedDate;

  // Function that allows us to add new todos to our todos
  function todosCreate(){
    vm.todos.push({ task: vm.text, done: false, createDte: new Date(), dueDte: vm.dueDate, completedDte: null });
    vm.text = null;
    vm.dueDate = null;
    // console.log(vm.todos);

  function updateCompletedDate(todo) {
    if (todo.checked) {
		  // do something
  	} else {
  		// do something else

  // Get one todo based on the $stateParams
  function todosShow() {
    return vm.todos[$stateParams.id];

  // Function that allows us to delete specific todos from our todos
  function todosDelete(todo){
    vm.todos = vm.todos.filter(x => x.task !== todo.task);

  // Returns a count of the tasks that have been marked as done
  function todosCompleted(){
    return vm.todos.filter(x => x.done === true);

  // Returns a count of the tasks that have not been marked as done
  function todosRemaining(){
    return vm.todos.filter(x => x.done === false);


<!DOCTYPE html>
<html ng-app="todoApp" lang="en">
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>To Do Or Not To Do</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <base href="https://www.sitepoint.com/" />
  <!-- inject:js -->
  <!-- endinject -->
  <!-- inject:css -->
  <!-- endinject -->

<body ng-controller="ToDosCtrl as todos">
    <h1>YOU'VE GOT {{ todos.todosRemaining().length }} THINGS TO DO!</h1>
    <h4>{{ todos.todosCompleted().length }} things completed | {{ todos.todosRemaining().length }} things remaining</h4>
  <nav class="tabs">
    <a ui-sref-active="active" ui-sref="home">List</a>
    <a ui-sref-active="active" ui-sref="archive">Archive</a>
  <main ui-view></main>


<!-- begin add new todo -->
<form class="add-todo" ng-submit="todos.todosCreate()">
    <h4>Add New Todo...</h4>
      <input id="newTodoTxt" class="text-box" type="text" placeholder="I need to..." ng-model="todos.text">
      <label for="newTodoDate">Due Date (optional)</label>
      <input id="newTodoDate" class="date-box" type="date" ng-model="todos.dueDate">
      <input type="submit" class="btn btn-add" value="+">
<!-- end add new todo -->

<!-- begin show all remaining todos -->
<section class="todo-list">
    <li ng-repeat="todo in todos.todosRemaining() track by $index">
      <input class="checkbox" type="checkbox" onchange="todos.updateCompletedDate(todo)" ng-model="todo.done" id="todo-{{$index}}">
      <label for="todo-{{$index}}" ng-class="{done: todo.done}">{{ todo.task }}</label>
      <a ui-sref="todosShow({ id: $index })">more info</a>
      <button class="btn btn-delete" ng-click="todos.todosDelete(todo)">x</button>
      <div class="todoDates"><em>Created:</em> {{ todo.createDte | date:'d MMM yyyy, HH:mm:ss' }}. <em>Due:</em> {{ todo.dueDte | date:'d MMM yyyy, HH:mm:ss' }}</div>
<!-- end show all todos -->

Credit: Source link

Previous Next
Test Caption
Test Description goes like this