AngularJS show data from api in form to update it

Question

im not sure the title explains clear enough what im trying to do, so im gonna try to explain here. i did the blog app from the book angularjs - from novice to ninja. because the api that the book uses is not working anymore, there were some functionalities i wasn't able to test. so later i did another tutorial of phalcon and build and api to do what the one in the angularjs book was supposed to. the api works fine (tested with postman, and also i use it for the login, so the blog app reaches it but i was only able to make it work in the login so far). so i have some doubts about the data i get from the api and how to show it in the for when i try to update one of the posts. so the services.js file is like this:

angular.module('spBlogger.admin.services', []).
factory('Post', ['$resource', 'API_ENDPOINT', function ($resource, API_ENDPOINT) {
    return $resource(API_ENDPOINT, {id:'@_id'}, {
        update: {
            method: 'PUT'
        }
    });
}]).
service('popupService', ['$window', function($window){
    this.showPopup = function(message){
        return $window.confirm(message); //Ask the users if they really want to delete the post entry
    }
}]).
value('API_ENDPOINT', 'http://testing-phalcon/api/posts/:id');

the controller.js file:

controller('PostUpdateController', ['$scope', 'Post', '$stateParams', function ($scope, Post, $stateParams) {
    console.log('in PostUpdateController');
    $scope.post = Post.get({id:$stateParams.id}); //Obtain the Post from backend. Search by Id
    console.log($scope.post);
    $scope.buttonText = "Update"; // Set initial label for button
    $scope.updatePost = function(){
        $scope.buttonText = "Updating. . ."; //Once clicked change button text
        $scope.post.$update(function(){
            $state.go('admin.postViewAll'); //Once updated go to state 'admin.postViewAll'
        });
    }
}])

the admin-update-post.html file that loads the form:

and finally the _form.html:


    Post Title
    
        
        Permalink:/posts/[id]/{{post.title | permalink}}
        Title is mandatory
    


    Content
    
        
        {{post.content | wordcount}} words

        You need to have some content!
    


    Keywords
    
        
        Sorry! No special characters allowed here

What i want to achieve is that when i select a post that i want to update, i want to display the form with the data from the post in the title input, the content in the textarea, and the keywords in the keywords input. what i tried in the controller (forgive me if it looks bad, but im very new to angular) is:

$scope.thepost = {};
$scope.thepost.title = $scope.post.title;

but this obvioulsy doesn't work. i know the data is getting to the controller because of the console logs (i can see the api answers correctly), but im not sure first how to parse it and then how to pass it from the controller to the view. any help is welcome. thanks!

EDIT the template that displays all the posts available is admin-all-posts.html:


    
        
            
                View All Posts
                
            
            
                {{post.title}}
                
                    Edit
                    Delete

the controller that loads the posts from the api is in controllers.js:

controller('PostListController', ['$scope', 'Post', 'popupService', '$state', function ($scope, Post, popupService, $state) {
    $scope.posts = Post.query(); //Obtain all the posts from backend
    $scope.deletePost = function(post){
        if(popupService.showPopup('Really delete this?')){ //Ask for confirmation
            post.$delete(function(){
                $state.go('admin.postViewAll', undefined, { //once deleted reload the state
                    reload: true
                });
            });
        }
    }
}])

i hope this helps

AngularJS show data from api in form to update it

Answers (1)

Related Questions