I am creating a simple contact management application using Crud using AngularJS 1.0.0rc8.
Obtaining a list of existing contacts is not a problem, but when you try to save a new contact with the server, a new line is created with the full id, created_at and updated_at values, but the rest of the models are ignored.
Here is a screenshot to show what I mean:
As you can see, numbers 4 and 5 were assigned identifiers, but first_name, last_name and phone_num were not stored in the database.
I use the $ scope.addContact function inside the Controller, which deals with the object.
Here is the complete code for the contact list controller:
'use strict'; function ContactListCtrl($scope, $http) { $http.get('/contacts').success(function(data) { $scope.contacts = data; }); $scope.addContact = function(data) { $http.post('/contacts/', data).success(function(data) { console.log(data); data.first_name = $("#new_contact_first_name").val(); data.last_name = $("#new_contact_last_name").val(); }); this.newFirstName = ''; this.newLastName = ''; }; };
After clicking "Save" on the partial content new-contact.html, the object is registered in the Console, if I check its contents, what is enough to collect the values - note that Jimi Hendrix is:
Here is the form that appears in the new-contact.html template:
<form id="contact_form" ng-submit="addContact()"> <input type="text" id="new_contact_first_name" name="newContactFirstName" ng-model="newFirstName" placeholder="First Name"></br> <input type="text" id="new_contact_last_name" name="newContactLastName" ng-model="newLastName" placeholder="Last Name"></br> <input type="button" id="contact_submit_btn" value="Add Contact" class="btn btn-primary"> </form>
The addContact () function is run after the form is submitted using jQuery:
$(document).ready(function(){ $("#contact_submit_btn").click(function(){ $("#contact_form").submit(); }); });
(Something tells me that I cannot use the ng-model attributes correctly.)
Any ideas on where I am going wrong? Or ideas on how I can better start this project?
Thanks.
UPDATE BELOW:
Here is my entire updated controller code - using Sathish:
// contacts controllers 'use strict'; function ContactListCtrl($scope, $http, Contacts) { $scope.contacts = Contacts.index(); $scope.addContact = function() { var newContact = { first_name: $scope.newContactFirstName, last_name: $scope.newContactLastName }; var nc = new Contacts({ contact: newContact }); nc.$create(function() { $scope.contacts.push(nc); // now that the contact is saved, clear the form data $scope.newContactFirstName = ""; $scope.newContactLastName = ""; }) } }; ContactListCtrl.$inject = ['$scope', '$http', 'Contacts']; function ContactDetailCtrl($scope, $routeParams, Contacts) { $scope.contact = Contacts.get( {contact_id: $routeParams.contact_id} ); } ContactDetailCtrl.$inject = ['$scope', '$routeParams', 'Contacts'];
Now I get the error message: Unknown provider for contacts. Here is a screenshot of the error
Ok, I managed to fix this error by providing ngResource in the main application file. Here's what it looks like:
// main app javascript file 'use strict'; angular.module('contactapp', ['ngResource']). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/contacts', {template: 'assets/app/partials/contact-list.html', controller: ContactListCtrl}). when('/contacts/new', {template: 'assets/app/partials/new-contact.html', controller: ContactListCtrl}). when('/contacts/:contact_id', {template: 'assets/app/partials/contact-detail.html', controller: ContactDetailCtrl}). otherwise({redirectTo: '/contacts'}); }]);
I get a new error: WARNING: cannot validate CSRF token
Well, I was able to fix this problem by adding a callback to the API controller: Rails shows “WARNING: CSRF Token Authentication Fails” from the POST Report for RestKit
Now I come back to the original problem. When the create method is called, a new row is stored in the database, but the model data is not.
Amazing ... finally, this work works.
The problem was the $ scope.addContact function. He used the "name" to enter instead of the ng-model binding called "newFirstName" and "newLastName", which is in the template.
Here's what the updated function looks like:
$scope.addContact = function() { var newContact = { first_name: $scope.newFirstName, last_name: $scope.newLastName }; var nc = new Contacts({ contact: newContact }); nc.$create(function() { $scope.contacts.push(nc);