Is it possible to call a certain function from the controller in angular?

Question

I start developing the MEAN stack and make a Todo application in which I create task tables and then save to todo in this specific task sheet using angularjs.

At first, I simply extracted all the todo without considering which list of tasks it belongs to, as well as creating todos on go. Now I want to improve it to get todos only for this particular task table. Since I dynamically want to load it, I use routeProvider with a value of '/:TaskID' where TaskID changes. Therefore, if TaskID exists, I use the function, otherwise I extract everything.

Something like that:

 if($routeParams.TaskID) { var id = $routeParams.TaskID; Todos.getTodosForId(id) .success(function(data) { $scope.loading = false; $scope.formData = {}; // clear the form so our user is ready to enter another $scope.todos = data; // assign our new list of todos }); } else { // GET===================================================================== // when landing on the page, get all todos and show them // use the service to get all the todos Todos.get() .success(function(data) { for(var i = 0; i < data.length; i++) { $scope.todos.push(data[i]); } $scope.loading = false; }); } 

Instead of using if-else, is it possible to keep them independent? How I want both of them to be useful by removing this condition. Is it possible to call the method here: For a specific TaskID:

 .when('/:TaskID', { templateUrl: "app.html", controller: "mainController" }) 

For all Todos:

 .when('/', { templateUrl: "app.html", controller: "mainController" }) 

Another question: how to show todos only for this particular task table when creating a task table?

As shown in the figure, on my page all todo are displayed, and not the one that has not yet been created. Therefore, instead of showing all Todo, he should first show me No Todos . As soon as I start adding todos, I should see only those todos in this task sheet. I'm a little confused about how to do this?

Answer 1

If you want to call these functions anywhere in your controller and in your template, you can bind them to the $scope variable as follows:

 $scope.cleanForm = function(data) { $scope.loading = false; $scope.formData = {}; $scope.todos = data; }; $scope.loadForm = function(data) { $scope.todos = data; $scope.loading = false; }; if($routeParams.TaskID) { var id = $routeParams.TaskID; Todos.getTodosForId(id).success($scope.cleanForm(data)); } else { Todos.get().success($scope.loadForm(data)); }