Ruby on Rails - AngularJS add new record

Question

In my Ruby on Rails application i'm trying to add a new record through AngularJS. I'm using this method:

i create a resource called notification:

rails g resource notifications title:string body:text

and i've populate it:

Notification.create!(title: "Test1", body:" Some Text here")
Notification.create!(title: "Test2", body:" Some Text here")
Notification.create!(title: "Test3", body:" Some Text here")
Notification.create!(title: "Test4", body:" Some Text here")

i pass all data by Json (located in http://localhost:3000/application/notifications)

i set up now some angular js:

app.controller('notificationCtrl', ['$scope', '$http', function ($scope, $http) {

    // array for the notifications
    $scope.notifications = [];

    // method for get the notification
    var retriveNotifications = function(){
        // Console Log
        console.log(' Sto preparando le notifiche ');
        // trying to get to the notification page
        $http.get('/application/notifications').success(
            // getting the notifications
            function(items){
                $scope.notifications = items;
            }); 
    };

    //add a notification
    $scope.updateNotifications = function(title, body){
         var item = {title: title , body: body}

        $http.post('/application/notifications', item);
    }


    retriveNotifications();


}])

this is my html file:

<form ng-submit="updateNotification()">
    <input ng-model="notificationName" placeholder="Title of the notification">
    <input ng-model="notificationText" placeholder="Body of notification">
    <input type="submit" value="Send"> 
</form>
<ul ng-repeat="notification in notifications">
    <li>
        <h4>{{notification.title}}</h4>
        <p>{{notification.body}}</p>
    </li>
</ul>

I'm a beginner of Angular JS and i know that the function updateNotifications is wrong. How i can insert (in the Notification database) a new record with Angular JS?

Thanks for the help

In the form, you call updateNotification(), but in the controller the method is named updateNotifications. Not sure if that's the only problem, but the first thing that popped out to me. — Bill Turner
– Bill Turner, Commented Aug 6, 2015 at 17:04

Rimon S · Accepted Answer · 2015-08-06 17:35:41Z

First there is a type in your update notification function

in your html file it is updateNotification();

in your js file it is updateNotifications also remove title and body params from the function as you are not declaring them in your html

to add a new record simple use push method to your array

     app.controller('notificationCtrl', ['$scope', '$http', function ($scope, $http) {

// array for the notifications
    $scope.notifications = [];

   $scope.newItem ={};

// method for get the notification
    var retriveNotifications = function(){
    // Console Log
     console.log(' Sto preparando le notifiche ');
    // trying to get to the notification page
    $http.get('/application/notifications').success(
        // getting the notifications
        function(items){
            $scope.notifications = items;
        }); 
};
  $scope.updateNotifications = function(){
      var title = $scope.notificationName;
      var body = $scope.notificationText;
     var newItem = {title: title , body: body}

    $http.post('/application/notifications', newItem);
    //push your new item to notification array of records 
    $scope.notifications.push(newItem);
     $scope.newItem = {};
    }

    retriveNotifications();


 }])

I highly recommend this screen cast for you to begin using rails with angularjs

Angularjs and rails (railscasts.com

Collectives™ on Stack Overflow

Ruby on Rails - AngularJS add new record

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related