CODEWITHSUNDEEP
angularjsnode.jsmongodbexpress
Doitnow
Doitnow

Reputation: 73

Form Value update using Angular js, Node Js , express js and Mongo DB

I'm totally new to MEAN and working on demo project where I can perform basic CRUD activity using Nodejs,Express, Angular js and Mongo DB but facing issue during update.

I don't know how to call Mongo DB update query using Angular js ng-click. I can fetch data from Mongo DB which is showing in the screenshot below.

But I want to update the values if user make any change in the values and press submit. I'm using ng-click for update.

I'm trying it for last two days but not able to find any solution, I've checked few example but find it they have different approach .

Any help will be appreciated

Html View :

enter image description here

HTML View Code : 

    <table cellspacing="0" cellpadding="0" border="0" id="id-form" ng-app="app-setting" ng-controller="SettingController" >
    <tbody><tr>

        <th valign="top">Facebook Link:</th>
        <td><input type="text" class="inp-form" ng-model="settings.facebook"></td>
        <td></td>
    </tr>
    <tr>
        <th valign="top">Twitter Link:</th>
        <td><input type="text" class="inp-form" ng-model="settings.twitter"></td>

    </tr>


    <tr>
        <th valign="top">Google+:</th>
        <td><input type="text" class="inp-form" ng-model="settings.googleplus"></td>
        <td></td>
    </tr>

        <tr>
        <th valign="top">Youtube:</th>
        <td><input type="text" class="inp-form"  ng-model="settings.youtube"></td>
        <td></td>
    </tr>

            <tr>
        <th valign="top">Email:</th>
        <td><input type="text" class="inp-form" ng-model="settings.email"></td>
        <td></td>
    </tr>

            <tr>
        <th valign="top">Contact #:</th>
        <td><input type="text" class="inp-form" ng-model="settings.contactnumber"></td>
        <td></td>
    </tr>




<tr>
    <th>&nbsp;</th>
    <td valign="top">
        <input type="submit" class="form-submit" value="update" ng-click="update(settings)">

    </td>
    <td></td>
</tr>
</tbody></table>
<!-- end id-form  -->

Controller : 

.module('app-setting')
.controller('SettingController',SettingController);

function SettingController($scope, $http ) {
 $scope.page = "Setting";

 $http.get('/admin/get-setting-list')
  .then(function(res){
      $scope.settings = res.data;  

    });


   $scope.update = function(data){
     //what will be here 

 };

Routes :

 var Setting = require('../models/setting').Setting;

 router.put('/admin/setting/:id', function(req, res, next) {
 Setting.findAndModify(req.params.id,req.body, function (err, post)  {
 if (err) return next(err);
  user:res.json(post);
 });

});

Model :

     var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var adminService = new Schema({
  facebook: String,
  youtube: String,
  googleplus:  String,
  twitter:String,
  email:String,
  contactnumber:String,
  created: {type: Date, default: Date.now}
});

var Setting = mongoose.model('Setting', adminService);

module.exports = {
  Setting : Setting
};

Upvotes: 1

Views: 3369

Answers (1)

Aishwat Singh
Aishwat Singh

Reputation: 4459

Well, your HTML calls update method and passes settings object to it, which looks ok in angular controller.

By looking at your node.js code, you need to call

$http.put('/admin/setting/:id',....) in settingController

ref: https://docs.angularjs.org/api/ng/service/$http

and you need to understand http methods http://www.w3schools.com/tags/ref_httpmethods.asp

Upvotes: 2

Related Questions