Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS Basics (1.x) Services in Angular Using Services To Save and Delete Data

Posted by George Akinian
George Akinian
17,615 Points

ng-click="deletTodo(todo)" is not firing the msg in the console.

trying to figure out what is it that I'm missing from the video. Here's my code.:

<!doctype html>
<html lang="en">
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link href='styles/main.css' rel='stylesheet' type="text/css">
</head>
<body ng-app="todoListApp">

 <h1 ng-click="helloWord()">My TODO's</h1>
 <div ng-controller="mainCtrl" class="list">

  <div class="item" ng-class="{'editing-item' : editing,
'edited' : todo.edited}" ng-repeat="todo in todos">
    <input type="checkbox" ng-model="todo.complete"/>
    <label ng-click="editing=true;" ng-hide="editing"  ng-click='helloWorld()'>{{todo.name}}</label>
    <input ng-change="todo.edited = true" ng-blur="editing = false;" ng-show="editing"  ng-model="todo.name" class="editing-label"   type="text"/>

  <div class="actions">

      <a href="" ng-click=" editing = !editing">edit</a>
      <a href="" ng-click='helloWorld()'>save</a>
      <a href="" ng-click="deletTodo(todo)" class="Delete">delete</a>
    </div>
  </div>
   {{todos}}
 </div>
  <script src="vendor/angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
  <script src="scripts/hello-world.js" type="text/javascript"></script>
</body>
</html>

angular.module("todoListApp", [])

.controller('mainCtrl', function($scope, dataService) {
  $scope.learningNgChange = function() {
    console.log("An input changed!");
  };

  $scope.helloWorld = dataService.helloWorld;

  dataService.getTodos(function(response) {
  console.log(response.data);
  $scope.todos = response.data; 
  });

  $scope.deleteTodo = function(todo) {
    dataService.deleteTodo(todo); 

  };
  $scope.saveTodo = function(todo) {
    dataService.saveTodo(todo);
  };
})
.service('dataService', function($http) {
  this.helloWorld = function() {
    console.log("This is the data sercies's method!!");
  };

  this.getTodos = function(callback){
    $http.get('mock/todos.json')
    .then(callback)
  };

  this.deleteTodo = function(todo) {
    console.log("The " + todo.name + " todo has been deleted!")
    // other logic
  };


  this.saveTodo = function(todo) {
    console.log("The " + todo.name + " todo has been saved!");
    // other logic
  };

});

3 Answers

Marc Laughton
Marc Laughton
32,056 Points
Marc Laughton
Marc Laughton
32,056 Points

Hey there Paul,

Looks like this one may be a case of the method call spelling being off...see the following:

<a href="" ng-click="deletTodo(todo)" class="Delete">delete</a>

The method you wrote in your 'dataService' is 'deleteTodo' - thankfully, an easy fix!

George Akinian
George Akinian
17,615 Points

Yes. I saw that. Thanks for taking time and kindness.

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

Thanks, Marc.

Paul, if this solved your problem could you mark this as the "Best Answer"? Doing so will help other members who run into similar issues.

cb123
PLUS
cb123
Courses Plus Student 9,858 Points
cb123
cb123
Courses Plus Student 9,858 Points

Also, the below seems incorrect.

     this.deleteTodo = function(todo) {
         console.log("The " + todo.name + " todo has been deleted!")

without the semicolon the console message was not returned as expected.

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

In the html file the hello.js link is unnecessary.