d

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

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

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

angular
  .module('todoApp')
  .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);
  }
}

###index.html

<!DOCTYPE html>
<html ng-app="todoApp" lang="en">
<head>
  <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 -->
</head>

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

###home.html

<!-- begin add new todo -->
<form class="add-todo" ng-submit="todos.todosCreate()">
  <fieldset>
    <h4>Add New Todo...</h4>
    <p>
      <input id="newTodoTxt" class="text-box" type="text" placeholder="I need to..." ng-model="todos.text">
    </p>
    <p>
      <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="+">
    </p>
  </fieldset>
</form>
<!-- end add new todo -->

<!-- begin show all remaining todos -->
<section class="todo-list">
  <ul>
    <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>
    </li>
  </ul>
</section>
<!-- end show all todos -->

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this