Saturday, 3 June 2017

How to send data from API without input the data again? (angular.js)

I have data like this enter image description here

I want to send all the data that I get from API $http.get('/api/kegiatan/'+ id) if I click submit button. But I don't know how to do it. Please, help.

My current code is this (show.html):

    <div class="panel panel-default" ng-init="showKegiatan()">

  <div class="panel-heading">
    <p class="panel-title"> Employee Detail Information</p>
  </div>
  <div class="panel-body">
    <form>
    <div class="form-group">
     <label class="form-control">NIK: </label>
     <label class="form-control">Nama: </label>
     <label class="form-control">PIC: </label>
     <label class="form-control">Tanggal: </label>
     <label class="form-control">Panitia: </label>
     <label class="form-control">Deskripsi: </label>       

    <a href="#/templates/kegiatan" class="btn btn-default"> Cancel</a>
    </div>
  </form>   
  <div ng-controller="empController">
      <form ng-submit="submit(kegiatan)">
    <legend>Upload a new file here:</legend>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" ng-model="upload.name" ng-value="kegiatan.pic" required/>
    <br/>
    <label for="file">File:</label>
    <input type="file" name="file" id="file" ng-model="upload.file" ngf-select ngf-max-size="25MB" required/>
    <br/>
    <input type="submit" value="Submit"/>
  </form>
      </div>    
    <div>
<div>

then the app.js:

    var myApp = angular.module('myApp',['ngRoute','ngFileUpload']).controller('empController', ['$http', 'Upload', '$scope', '$route', '$routeParams', '$window', function($http,Upload,$scope,$route,$routeParams,$window,kegiatan){
$scope.showKegiatan = function(){
        var id = $routeParams.id;
        $http.get('/api/kegiatan/'+ id).then(function(response){
            $scope.kegiatan = response.data;
        });
    };
 $scope.submit = function(kegiatan){  
    Upload.upload({
      url: 'http://localhost:3000/api/uploads',
      method: 'post',
      data: $scope.upload
    }).then(function (response) {
       $window.alert('Success ' + response.config.data.file.name + 'uploaded. Response: '); 
      console.log(response.data);       
    });
  }  
}]);

and this code for the server (node.js):

    app.post('/api/uploads', upload.single('file'), function (req, res, next) {
  console.log(req.body);
  console.log(req.file);
  var newUpload = {
    name: req.body.name,
    judul_kegiatan:req.body.judul_kegiatan,
        jenis_kegiatan:req.body.jenis_kegiatan,
        pic:req.body.pic,
        tanggal:req.body.tanggal,
        panitia:req.body.panitia,
        deskripsi:req.body.deskripsi,
    created: Date.now(),
    file: req.file
  };
  c_pelaporan.create(newUpload, function (err, next) {
    if (err) {
      next(err);
    } else {
      res.send(newUpload);
    }
  });
});



via Hafes Ibrahim

No comments:

Post a Comment