Develop Reference

Pass after click event in ejs page the result of the req.query.name request

I would need to pass after a click event in an ejs page the result of the req.query.name request to the router.get in index.js
router.get('/log', function (req, res) { //what i would like to do is: router.get('/req.query.name', function(req, res) {
var db = req.db;
var pid = req.query.name;
var collection = db.get('startup_log');
collection.find({ pid }, function (e, docs) {
res.render('userlist', { userlist: docs });
console.log(pid);
The request must be sent only after clicking on the search criteria
below the form of the ejs page:
<form action="/log" method="GET" encType="multipart/form-data">
<label htmlFor="newNote">New Note:</label>
<input type="text" name="name" className="form-control" rows="5" id="name" placeholder="text here"></input>
<button id="done" type="submit" className="btn btn-primary pull-right" onclick="x"></button>Done</button>
<button id="cancel" className="btn btn-warning pull-right">Cancel</button>
</form>
thanks for who will help me !!!

ng-view scope communicating with main scope communication

It's maybe a stupid question but it's late and i'm desperate.
I have a angularjs application that uses ngRoute. But everything is done in one controller. Now I have a form in a view and the use of that form is to put it's input field data into a var to send with post.
Don't mind al the console log i'm trying to find the error.
APP.JS
`
$scope.addDevice = function(){
$scope.device = {};
var data = {
'Name' : $scope.device.ChildName,
'Serial' : $scope.device.Serial
};
console.log($scope.device.Serial);
console.log($scope.device.ChildName);
console.log(data);
$http.post('http://141.135.5.117:3500/device/register', data, { headers: headers })
.then(function(response){
console.log(response);
console.log(headers);
});
}`
Settings.html ( Note: this is a view in ng-view)
<form role="form" class='userForm'>
<label for="addDevice">Add Device</label>
<input type="text" class="form-control" id="deviceserial" placeholder="Enter serial number" ng-model="$scope.device.Serial">
<input type="text" class="form-control" id="Devicechildname" placeholder="Enter baby name" ng-model="$scope.device.ChildName">
<button type="submit" class="btn btn-success btn-block" ng-click="addDevice()">Add Device</button>
<p>{{$scope.device.Serial}}</p>
</form>
This is the console output
Console output
All the functions are done in one controller.

First Remove $scope from ng-model="$scope.device.Serial"
and define $scope.device = {}; outside $scope.addDevice = function(){
$scope.device = {};
$scope.addDevice = function(){
-- you code here --
}
Working code example
angular.module('inputExample', [])
.controller('ExampleController', ['$scope','$http', function($scope,$http) {
$scope.val = '1';
$scope.device = {};
$scope.addDevice = function(){
var data = {
'Name' : $scope.device.ChildName,
'Serial' : $scope.device.Serial
};
console.log($scope.device.Serial);
console.log($scope.device.ChildName);
console.log(data);
$http.post('http://141.135.5.117:3500/device/register', data)
.then(function(response){
console.log(response);
console.log(headers);
});
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="inputExample">
<div ng-controller="ExampleController">
<form role="form" class='userForm'>
<label for="addDevice">Add Device</label>
<input type="text" class="form-control" id="deviceserial" placeholder="Enter serial number" ng-model="device.Serial">
<input type="text" class="form-control" id="Devicechildname" placeholder="Enter baby name" ng-model="device.ChildName">
<button type="submit" class="btn btn-success btn-block" ng-click="addDevice()">Add Device</button>
<p>{{device.Serial}}</p>
</form>
</div>
</div>

Add image to a list item in AngularJS

I have a simple shopping list and need to be able to upload an image to individual list items. Using MongoDB and AngularJS.
The image should be bound to the $scope.list.items therefore adding an image to a list item (eg. a picture of bread). How can I upload an image and bind it as part of that object? Basically the list of items would also contain images once this is complete.
HTML for displaying items:
<ul class="list-group">
<li style="color:{{list.color}}" class="list-group-item" ng-repeat="item in list.items | orderBy:propertyName:reverse | filter: search ">
<input type="checkbox" ng-model="item.isChecked" ng-click="editItem()">
{{item.name}} - {{item.priority}}
<i class="fa fa-trash-o" aria-hidden="true" ng-click="removeItem(item)"></i>&nbsp
<i class="fa fa-pencil" aria-hidden="true" href ng-click="showEdit = !showEdit" ng-show="!showEdit"></i><br>
<small class="form-text text-muted">Note: {{item.note}}</small>
<div ng-show = "showEdit">
<h4>Edit {{item.name}}</h4>
<form ng-submit="editItem()">
<input class="form-control" type="text" name="name" id="name" ng-model="item.name" maxlength="25" required>
<select class="form-control" name="priority" id="priority" ng-model="item.priority" required>
<option value="">Priority</option>
<option value="High">High</option>
<option value="Low">Low</option>
</select>
<input type="text" class="form-control" name="note" id="note" ng-model="item.note" maxlength="255" value= " ">
<button class="btn btn-default" type="submit" ng-click="showEdit = !showEdit">Update</button>
</form>
</div>
<br>
</li>
</ul>
Here is the HTML for adding an item:
<button class="btn btn-default btn-custom" href ng-click="showAddItem = !showAddItem" ng-show="!showAddItem">Add Item</button>
<div ng-show="showAddItem" class="add-item">
<h4>Add Item</h4>
<form ng-submit="addItem()">
<input class="form-control" type="text" name="name" id="name" ng-model="newItem.name" placeholder="Item" maxlength="25" required>
<select class="form-control" name="priority" id="priority" ng-model="newItem.priority" required>
<option value="">Priority</option>
<option value="High">High</option>
<option value="Low">Low</option>
</select>
<input type="text" class="form-control" name="note" id="note" ng-model="newItem.note" placeholder="Note" maxlength="255" value= " ">
<button class="btn btn-default btn-add" type="submit">Add</button>&nbsp<span class="close-box" ng-click="showAddItem = !showAddItem"><u>close</u></span>
</form>
<!-- <button class="btn btn-default btn-lg btn-custom" href="">Add Item</button> -->
</div><br><br>
<a ng-href="#/home"><button class="btn btn-default btn-lg btn-home">Save & Return</button></a>
</div>
And the controller for adding an item:
(function () {
'use strict';
var app = angular.module('myApp');
app.controller('ShoppingListController', ['$scope', '$http', '$routeParams', 'API_BASE', '$location', function($scope, $http, $routeParams, API_BASE, $location){
// GET SPECIFIC LIST
$scope.list = [];
var id = $routeParams.id;
$http({
method: 'GET',
url: API_BASE + 'shopping-lists/' + id
}).then(function successCallback(response) {
$scope.list = response.data[0];
}, function errorCallback(response) {
console.log('it did not work');
console.log(response.statusText);
});
// REMOVE LIST
$scope.removeList = function(){
var id = $scope.list.id;
console.log(id);
$http.delete(API_BASE + 'shopping-lists/' + id)
.success(function (data, status, headers, config) {
console.log('you deleted :' + $scope.list);
})
.error(function (data, status, header, config) {
});
$location.path('/home');
};
// RANDOM ID
function makeid()
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 20; i++ ){
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
text += Date.now();
return text;
}
// ADD ITEM
$scope.addItem = function(){
var created = new Date();
var newID = makeid();
if($scope.list.hasOwnProperty('items') === false){
$scope.list.items = [];
}
$scope.list.items.push({
name : $scope.newItem.name,
priority : $scope.newItem.priority,
note: $scope.newItem.note,
isChecked: false,
listId: $scope.list.id,
created: created,
id: newID
});
// console.log($scope.list.items);
$http.put(API_BASE + 'shopping-lists/', $scope.list)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
// Reset input fields after submit
$scope.newItem = {
name: "",
priority: "",
note: ""
};

I modified your code to add an image to the list, and then altered the list item display to check for properties:
<input type="checkbox" ng-model="item.isChecked" ng-click="editItem()" ng-show="item.hasOwnProperty('isChecked')">
<img ng-show="item.hasOwnProperty('imageSrc')" src="{{ item.imageSrc }}" />
And I made a simple function to add an image item that has an imageSrc property, used in the image that only appears if that property is set.
$scope.list.items.push({
imageSrc: 'http://lh5.googleusercontent.com/-QErodXkgwBc/AAAAAAAAAAI/AAAAAAAAAWQ/LPUidgUqYHs/photo.jpg?sz=32',
priority: '',
note: 'Evan',
//don't include this property - which will make the ng-show for the checkbox false
//isChecked: true,
created: new Date(),
id: -1
});
. This is one way to do it but you could do it differently.
Sample
'use strict';
var app = angular.module('myApp', ['ngRoute']);
app.constant('API_BASE','/api');
app.config(['$routeProvider', function($routeProvider) {}]);
app.controller('ShoppingListController', ['$scope','$http', '$routeParams', 'API_BASE', '$location', function($scope, $http, $routeParams, API_BASE, $location){
// GET SPECIFIC LIST
$scope.list = {items: []};
$scope.showAddItem = true;
var id = $routeParams.id;
//commenting this out because we don't have access to your server
/*$http({
method: 'GET',
url: API_BASE + 'shopping-lists/' + id
}).then(function successCallback(response) {
$scope.list = response.data[0];
}, function errorCallback(response) {
console.log('it did not work');
console.log(response.statusText);
});*/
// REMOVE LIST
$scope.removeList = function(){
var id = $scope.list.id;
console.log(id);
$http.delete(API_BASE + 'shopping-lists/' + id)
.success(function (data, status, headers, config) {
console.log('you deleted :' + $scope.list);
})
.error(function (data, status, header, config) {
});
$location.path('/home');
};
// RANDOM ID
function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 20; i++ ){
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
text += Date.now();
return text;
}
// ADD ITEM
$scope.addItem = function(){
var created = new Date();
var newID = makeid();
if($scope.list.hasOwnProperty('items') === false){
$scope.list.items = [];
}
$scope.list.items.push({
name : $scope.newItem.name,
priority : $scope.newItem.priority,
note: $scope.newItem.note,
isChecked: false,
listId: $scope.list.id,
created: created,
id: newID
});
// console.log($scope.list.items);
$http.put(API_BASE + 'shopping-lists/', $scope.list)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
// Reset input fields after submit
$scope.newItem = {
name: "",
priority: "",
note: ""
};
};
$scope.addImage = function(){
if($scope.list.hasOwnProperty('items') === false){
$scope.list.items = [];
}
$scope.list.items.push({
imageSrc: 'http://lh5.googleusercontent.com/-QErodXkgwBc/AAAAAAAAAAI/AAAAAAAAAWQ/LPUidgUqYHs/photo.jpg?sz=32',
priority: '',
note: 'Evan',
//don't include this property - which will make the ng-show for the checkbox false
//isChecked: true,
created: new Date(),
id: -1
});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<div ng-app="myApp" ng-controller="ShoppingListController">
<script src="script.js"></script>
<button class="btn btn-default btn-custom" href ng-click="showAddItem = !showAddItem" ng-show="!showAddItem">Add Item</button>
<div style="font-style: italic">//code for adding item
<ul class="list-group">
<li style="color:{{ list.color }}" class="list-group-item" ng-repeat="item in list.items | orderBy:propertyName:reverse | filter: search ">
<input type="checkbox" ng-model="item.isChecked" ng-click="editItem()" ng-show="item.hasOwnProperty('isChecked')">
<img ng-show="item.hasOwnProperty('imageSrc')" src="{{ item.imageSrc }}" />
{{item.name}} - {{ item.priority }}
<i class="fa fa-trash-o" aria-hidden="true" ng-click="removeItem(item)"></i>
<i class="fa fa-pencil" aria-hidden="true" href ng-click="showEdit = !showEdit" ng-show="!showEdit"></i><br>
<small class="form-text text-muted">Note: {{ item.note }}</small>
<div ng-show = "showEdit">
<h4>Edit {{ item.name }}</h4>
<form ng-submit="editItem()">
<input class="form-control" type="text" name="name" id="name" ng-model="item.name" maxlength="25" required>
<select class="form-control" name="priority" id="priority" ng-model="item.priority" required>
<option value="">Priority</option>
<option value="High">High</option>
<option value="Low">Low</option>
</select>
<input type="text" class="form-control" name="note" id="note" ng-model="item.note" maxlength="255" value= " ">
<button class="btn btn-default" type="submit" ng-click="showEdit = !showEdit">Update</button>
</form>
</div>
<br>
</li>
</ul>
<button ng-click="addImage()" >Add image</button></div>

File uploading not working MEAN stack

I'm beginner in MEAN development and trying to implement CRUD application using it. Initially I've successfully completed my CRUD app using MEAN. Now I'm trying to upload file using angular.js. I got to know that Angular.js doesn't support file upload functionality so by using https://www.youtube.com/watch?v=vLHgpOG1cW4 and https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs
I'm trying to implement this feature.
But somehow the code is not working and giving some angular.js error on firebug console.
Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=multipartFormProvider%20%3C-%20multipartForm%20%3C-%20AppCtrl....so on
Following is my code:
app/public/controller.js
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', 'multipartForm', function ($scope, $http, multipartForm) {
console.log("Hello World from controller");
$scope.contact = {};
var refresh = function () {
$http.get('/contactlist').success(function (response) {
console.log("I got the data that I requested");
$scope.contactlist = response; // This will put data into our html file
$scope.contact = "";
});
};
refresh();
$scope.addContact = function () {
console.log($scope.contact);
var uploadUrl = '/upload';
multipartForm.post('/contactlist', uploadUrl, $scope.contact).success(function (response) {
console.log(response);
refresh();
});
};
$scope.remove = function (id) {
console.log(id);
$http.delete('/contactlist/' + id).success(function (response) {
refresh();
});
};
$scope.edit = function (id) {
console.log(id);
$http.get('/contactlist/' + id).success(function (response) {
$scope.contact = response;
});
};
$scope.update = function () {
console.log($scope.contact._id);
//$scope.contact means sending all form data to server
$http.put('/contactlist/' + $scope.contact._id, $scope.contact).success(function (response) {
refresh();
});
};
$scope.deselect = function () {
$scope.contact = "";
};
}]);
app/public/index.html
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<title>Contact List App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title">Details</h4></div>
<div class="panel-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" ng-model="contact.name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" ng-model="contact.email">
</div>
<div class="form-group">
<label for="Contact">Contact</label>
<input class="form-control" placeholder="Contact" ng-model="contact.number">
</div>
<div class="form-group">
<label for="country">Country</label>
<select class="form-control" ng-model="contact.country">
<option value="">Select</option>
<option value="India">India</option>
<option value="Australia">Australia</option>
<option value="Germany">Germany</option>
<option value="Spain">Spain</option>
<option value="Japan">Japan</option>
<option value="Switzerland">Switzerland</option>
<option value="USA">USA</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="South Africa">South Africa</option>
<option value="England">England</option>
<option value="New Zealand">New Zealand</option>
</select>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<div class="radio">
<label>
<input type="radio" name="gender" id="optionsRadios1" value="Male" ng-model="contact.gender">
Male
</label>
<label>
<input type="radio" name="gender" id="optionsRadios2" value="Female" ng-model="contact.gender">
Female
</label>
</div>
</div>
<div class="form-group">
<label for="education">Education</label>
<div class="checkbox">
<label>
<input type="checkbox" name="education" ng-model="contact.education.MCA">
MCA
</label>
<label>
<input type="checkbox" name="education" ng-model="contact.education.BE">
BE
</label>
<label>
<input type="checkbox" name="education" ng-model="contact.education.ME">
ME
</label>
<label>
<input type="checkbox" name="education" ng-model="contact.education.BCA">
BCA
</label>
</div>
</div>
<div class="form-group">
<label>Avatar</label>
<input type="file" file-model="contact.file">
</div>
<div class="well well-lg text-center bg-gray">
<button class="btn btn-primary" ng-click="addContact()">Add Contact</button>
<button class="btn btn-info" ng-click="update()">Update</button>
<button class="btn btn-info" ng-click="deselect()">Clear</button>
</div>
</div>
<h4>Listing</h4>
<input type="text" class="form-control" ng-model="contact.names" placeholder="Instant result search">
<table class="table table-bordered">
<tr>
<th>Name</th>
<th>Email</th>
<th>Number</th>
<th>Country</th>
<th>Gender</th>
<th>Education</th>
</tr>
<tr ng-repeat="contact in contactlist| filter:contact.names|orderBy:-1">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
<td>{{contact.country}}</td>
<td>{{contact.gender}}</td>
<td>
{{contact.education}}
</td>
<td>
<button class="btn btn-danger" ng-click="remove(contact._id)">Remove</button>
<button class="btn btn-warning" ng-click="edit(contact._id)">Edit</button>
</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="controllers/controller.js"></script>
<script src="services/multipartForm.js"></script>
<script src="directives/fileModel.js"></script>
</body>
</html>
app/public/services/multipartForm.js
myApp.service('multipartForm', ['$http', function ($http) {
this.post = function (uploadUrl, data) {
var fd = new FormData();
for (var key in data)
fd.append(key, data[key]);
$http.post(uploadUrl, fd, {
transformRequest: angular.indentity,
headers: {'Content-Type': undefined}
});
};
}]);
And finally on Node/Express Side: app/server.js
var express = require('express');
var app = express(); // using this we can use commands, function of express in this (server.js) file
var mongojs = require('mongojs');
var db = mongojs('contactlist', ['contactlist']); // Means which mongodb database & collection we are going to use
var bodyParser = require('body-parser');
var multer = require('multer');
// To test whether server is running correctly
/* app.get("/", function(req, res){
res.send("Hello world from server.js");
}); */
app.use(express.static(__dirname + "/public")); // express.static means we are telling the server to look for static file i.e. html,css,js etc.
app.use(multer({dest: './uploads/'}).single('photo'));
app.use(bodyParser.json()); // To parse the body that we received from input
//This tells the server to listen for the get request for created contactlist throughout
app.get('/contactlist', function (req, res) {
console.log("I received a GET request");
//Creating an array of above data
var contactlist = [person1, person2, person3];
// its going to respond to the GET request by sending back contactlist data in JSON format which controller can use
res.json(contactlist);
db.contactlist.find(function (err, docs) {
console.log(docs);
res.json(docs);
});
});
// listens for the POST request from the controller
app.post('/contactlist', function (req, res) {
console.log(req.body);
db.contactlist.insert(req.body, function (err, doc) {
res.json(doc);
});
});
app.delete('/contactlist/:id', function (req, res) {
var id = req.params.id; // to get the value of id from url
console.log(id);
db.contactlist.remove({_id: mongojs.ObjectId(id)}, function (err, doc) {
res.json(doc);
});
});
app.get('/contactlist/:id', function (req, res) {
var id = req.params.id;
console.log(id);
db.contactlist.findOne({_id: mongojs.ObjectId(id)}, function (err, doc) {
res.json(doc);
});
});
app.put('/contactlist/:id', function (req, res) {
var id = req.params.id;
console.log(req.body.name);
db.contactlist.findAndModify({
query: {_id: mongojs.ObjectId(id)},
update: {$set: {
name: req.body.name,
email: req.body.email,
number: req.body.number,
country: req.body.country,
gender: req.body.gender,
education: req.body.education
}}, new : true}, function (err, doc) {
res.json(doc);
});
});
app.listen(3000);
console.log("Server running on port 3000");
Any help would be appreciated :)

send data from my controller to my ngDialog

In my controller i have this code, i get the id from one table in the html template and get one object from services and return to ngDialog to show to Edit this data and save in my api-rest:
(function() {
'use strict';
angular
.module('app')
.controller('FraseController', FraseController);
FraseController.$inject = ['FraseService','ngDialog'];
function FraseController(FraseService,ngDialog) {
var vm = this;
vm.texto = rpeuba;
vm.iden = 0;
vm.efrase = '';
vm.edit = function(){
FraseService.get().then(function(response){
console.log(response.data.response);
vm.efrase = response.data.response;
ngDialog.open({
template: 'newFrase',
scope: this
});
});
}
}
}());
and in this html code:
<script type="text/ng-template" id="newFrase">
<h1>Nueva Frase {{vm.texto}}</h1>
<div class="modal-body">
<div class="row">
<div class="form-group">
<label for="frase" class= "col-lg-2 espaciar">Frase: </label>
<div class="col-lg-10">
<input ng-model="frase.efrase.frace" type="text" name="frase" id="frase" class="form-control" placeholder="Escriba su frace aquí">
</div>
<br>
<label for="autor" class= "col-lg-2 control-label espaciar">Autor: </label>
<div class="col-lg-10 ">
<input type="text" name="autor" name="autor" class="form-control" placeholder="Escriba el Autor aquí">
</div>
<br>
<label class="col-lg-2 espaciar">Banner: </label>
<div class="col-lg-10">
<select name="banner" class="form-control selectize-input espaciar">
<option value="0"><< Ninguno >></option>
<option ng-repeat="itemb in FraseController.lbanner" value="{{itemb.id}}">
{{itemb.titulo}}
</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
ng-click="closeThisDialog('tiempo')">Cancelar</button>
<input name="submit" value="Insertar" class="btn btn-primary" title="Insertar" type="submit">
</div>
</script>
i want to show data from my controller in my ngDialog to Edit a one Frase

Good morning, here are how to solve all my problems with ngDialog.
as I run for an answer to what I call ngDialog.openConfirm and on the response run my controller methods mother and passed as a parameter an object from which consume your data.
This is my code to delete a frase.
JS in my controller:
vm.drop = function(__frase){ //Drop the frase
ngDialog.openConfirm({
template: '<h3>You are sure to delete the phrase<h3> '+
'<div class="modal-footer"> '+
'<button type="button" '+
'ng-click=closeThisDialog("Cancel") '+
'class="btn btn-default">Cancel'+
'</button> '+
'<button type="button" '+
'ng-click=confirm(dfrase.frase.id) '+
'class="btn btn-primary">Delete</button> '+
'</div>',
plain:true,
controllerAs: 'dfrase',
controller: [function() {
var vm = this;
vm.frase = __frase;
}]
})
.then(
function(value) { //ok
FraseService.drop(value).then(function(response) {
console.log(response.data.response);
});
refresh();
},
function(value) { //cancel
console.log(value);
}
);
}
FraseService consumer that is a factor with which it interacted with my api and refresh method refreshes me the frase list items.
D greetings