Can't edit record using Angular

Question

I want to implement 'edit' feature to any book, but I can't get my book.

How it works now:

1. I click on the any record (which is <tr>).
2. I am being redirected to the books_edit state
3. This 'edit' page must have all the data in form of current book (but it doesn't).

So, the question is: How can I pass book from the books state to books_edit state and submit it correctly?

HTML piece:

<tr ng-click="bookCtrl.editBook(book)" ng-repeat="book in bookCtrl.books">
      <td>{{ book.name }}</td>
      <td>{{ book.author }}</td>
      <td>{{ book.price }}</td>
      <td>{{ book.pubdate | date }}</td>
      <td>{{ book.coverUrl }}</td>
      <td>{{ book.pagesCount}}</td>
    </tr>

States:

  .state('books_new', {
    url: '/books/new',
    templateUrl: 'books/book_new.html',
    controller: 'BookCtrl as bookCtrl'
  })
  .state('books_edit', {
    url: '/books/edit',
    templateUrl: 'books/book_edit.html',
    controller: 'BookCtrl as bookCtrl'
  })
  .state('books', {
    url: '/books',
    templateUrl: 'books/books.html',
    controller: 'BookCtrl as bookCtrl'
  })

Controller's methods:

  editBook: function(book) {
    if (book) {
      console.log(book);  // logs correct book
      $state.go('books_edit'); // tried to send `book` as a parameter, didn't work
    }
  },

  submitBook: function(book) {
    if (book) {
      console.log(book);
      return books.$save(book).then(function(data) {
        $state.go('books');
      });
    }
  }

Edit snippet:

<form class="container col-lg-3" ng-submit="bookCtrl.submitBook(book)">
    <div class="input-group">
      <label class="col-sm-2 control-label">Назва:</label>
      <input type="text" ng-model="book.name" class="form-control">

I've tried to send book as a parameter in state, but no result.

Answer 1

The best way to handle this, is to be 'stateless'. This way a user can bookmark the edit page, and reload the page without requiring any state to be present in the app.

Pass the id of the book you want to edit as a url parameter to the edit state, like so:

state config:

  .state('books_edit', {
    url: '/books/edit/:bookId',
    templateUrl: 'books/book_edit.html',
    controller: 'BookCtrl as bookCtrl'
  })

controller:

$state.go('books_edit', {bookId: book.id});

In the edit controller, fetch the book using the id from the url, using the $stateParams service:

angular.module('myapp').controller('BookCtrl', function($scope, $stateParams){
    //fetch the book id from the url params
    var bookId = $stateParams.bookId;
    //now get the book with the given id
});

I would advise to use a separate controller for the edit functionality, i.e. do not use 'BookCtrl' for every view.

Answer 2

Define state parameters as following

$stateProvider.state('books_edit', {url: '/books/:bookId',params: {obj: null},templateUrl: 'books/books_edit.html',controller: 'booksCtrl'})

when calling pass parameter like this:

$state.go('books_edit',{obj: myobj});

In controller you can receive parameter using

$state.params.obj

Hope it helps.

Answer 3

You can use a service to reach this. Create a service where you can set/get the value and inject in both controllers. The service looks like this:

app.service('bookService', function() {
  var books = [];

  var addBook = function(obj) {
      books.push(newObj);
  };

  var getBook = function(){
      return books;
  };

  return {
    addBook: addBook,
    getBook: getBook
  };

});

And, in controller:

editBook: function(book) {
    if (book) {
      // ensure to inject productService in controller
      bookService.addBook(book)
      console.log(book);  // logs correct book
      $state.go('books_edit'); // tried to send `book` as a parameter, didn't work
    }
  },

In book_edit controller:

.....
// ensure to inject productService in controller
$scope.book = bookService.getBook(book)
....

You can also use $broadcast, read more: On and broadcast in angular

Hope it helps

Answer 4

Try passing it in state.go as something like this "books/" and then use state params to retrieve it.

state('books_edit', {
    url: '/books/edit:bookID',
    templateUrl: 'books/book_edit.html',
    controller: 'BookCtrl as bookCtrl'
  })

  submitBook: function(bookID) {
    if (bookID) {
      console.log(bookID);
      return books.$save(bookID).then(function(data) {
        $state.go('books/'+<bookID>);
      });
    }
  }

in the Controller

editBook: function($scope, $stateParams) {
     $scope.bookID = $stateParams.bookID;
  }

Answer 5

Thanks @fikkatra and @Gurpinder for helping with this! The complete solution is following:

1. Add this to the books_edit state: params: {data: null}

2. In the editBook() function send parameters to the next state:

   $state.go('books_edit',{bookId: book.$id, data: book});

3. Add this to the bookCtrl - bookCtrl.currentBook = $state.params.data;

4. Change ng-model in the view to bookCtrl.currentBook.KEY_NAME