Angular , page loads again and again - angularjs

i have a simple project of angularjs.
Problem
after login when i redirected to login.html , it continuously sends request and page is reloaded again and again
please help following is code
demoangular.js
<!DOCTYPE html>
<html data-ng-app="customerApp">
<head>
<title>Angular js</title>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="Scripts/app.js"></script>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>
<script>
</script>
</body>
</html>
HEllo.html
<h1>Welcome To Angular</h1>
<form id="main" data-ng-submit="login()">
<input name="name" id="user" type="text" data-ng-model="cardentials.username" required />
<input name="url" id="pass" type="password" data-ng-model="cardentials.password" required />
<button>new</button>
</form>
logout.html
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app.js"></script>
<style>
#mydiv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: grey;
opacity: .8;
}
.ajax-loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;
}
</style>
<button type="button" data-ng-click="logout()">logout</button>
<div data-ng-controller="CustomersController" class="container">
<strong class="error">{{ error }}</strong>
<!--<div id="mydiv" data-ng-show="loading">
<img src="Images/482.gif" class="ajax-loader" />
</div>-->
<p data-ng-hide="addMode">
<a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a>
</p>
<form name="addCustomer" data-ng-show="addMode" style="width: 600px; margin: 0px auto;">
<label>Name:</label><input type="text" data-ng-model="newcustomer.Name" required />
<label>Email:</label><input type="email" data-ng-model="newcustomer.Email" required />
<br />
<span class="error" data-ng-show="addCustomer.$error.email">Invalid Email format!</span>
<br />
<input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addCustomer.$valid" class="btn btn-primary" />
<input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
<br />
<br />
</form>
<table class="table table-bordered table-hover" style="width: 800px">
<tr>
<th>#id</th>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
<tr>
<td></td>
<td>
<input type="text" data-ng-model="search.Name" /></td>
<td>
<input type="text" data-ng-model="search.Email" /></td>
<td></td>
</tr>
<tr data-ng-repeat="customer in customers | filter:search">
<td><strong data-ng-hide="customer.editMode">{{ customer.CustomerID }}</strong></td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
<p data-ng-show="customer.editMode">
<input type="text" data-ng-model="customer.Name" />
</p>
</td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Email }}</p>
<input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Email" /></td>
<td>
<p data-ng-hide="customer.editMode"><a data-ng-click="toggleEdit(customer)" href="javascript:;">Edit</a> | <a data-ng-click="delcustomer(customer)" href="javascript:;">Delete</a></p>
<p data-ng-show="customer.editMode"><a data-ng-click="save(customer)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(customer)" href="javascript:;">Cancel</a></p>
</td>
</tr>
</table>
<hr />
</div>
app.js
var demoapp = angular.module('customerApp', ['ngRoute']);
demoapp.config(function ($routeProvider) {
$routeProvider.when('/hello', {
controller: 'SimpleController',
templateUrl: 'partials/hello.html'
});
$routeProvider.when('/logout', {
controller: 'newController',
templateUrl: '/logout.html'
});
$routeProvider.otherwise({ redirectTo: '/hello' });
});
demoapp.factory("authser", function ($location, $http) {
return {
login: function (cardentials) {
if (cardentials.username != "jot") {
alert("its ");
}
else {
$location.path('/logout');
}
},
logout: function () {
$location.path('/hello');
}
}
})
demoapp.controller('SimpleController', function ($scope, authser) {
$scope.cardentials = { username: "", password: "" };
$scope.login = function () {
authser.login($scope.cardentials);
};
});
demoapp.controller('newController', function ($scope, authser) {
$scope.logout = function () {
authser.logout();
};
});
var url = 'api/Customers/';
demoapp.factory('customerFactory', function ($http) {
return {
getCustomer: function () {
return $http.get(url);
},
addCustomer: function (customer) {
return $http.post(url, customer);
},
deleteCustomer: function (customer) {
return $http.delete(url + customer.CustomerID);
},
updateCustomer: function (customer) {
return $http.put(url + customer.Id, customer);
}
};
});
demoapp.controller('CustomersController', function PostsController($scope, customerFactory) {
$scope.customers = [];
$scope.loading = true;
$scope.addMode = false;
$scope.toggleEdit = function () {
this.customer.editMode = !this.customer.editMode;
};
$scope.toggleAdd = function () {
$scope.addMode = !$scope.addMode;
};
$scope.save = function () {
//$scope.loading = true;
var cust = this.customer;
customerFactory.updateCustomer(cust).success(function (data) {
alert("Saved Successfully!!");
cust.editMode = false;
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Saving customer! " + data.ExceptionMessage;
$scope.loading = false;
});
};
// add Customer
$scope.add = function () {
$scope.loading = true;
customerFactory.addCustomer(this.newcustomer).success(function (data) {
alert("Added Successfully!!");
$scope.addMode = false;
$scope.customers.push(data);
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Adding customer! " + data.ExceptionMessage;
$scope.loading = false;
});
};
// delete Customer
$scope.delcustomer = function () {
$scope.loading = true;
var currentCustomer = this.customer;
customerFactory.deleteCustomer(currentCustomer).success(function (data) {
alert("Deleted Successfully!!");
$.each($scope.customers, function (i) {
if ($scope.customers[i].CustomerID === currentCustomer.CustomerID) {
$scope.customers.splice(i, 1);
return false;
}
});
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Saving customer! " + data.ExceptionMessage;
$scope.loading = false;
});
};
//get all Customers
customerFactory.getCustomer().success(function (data) {
$scope.customers = data;
$scope.loading = false;
})
.error(function (data) {
$scope.error = "An Error has occured while loading posts! " + data.ExceptionMessage;
$scope.loading = false;
});
});


Solved it
updated logout.html
#callmekatootie thanks for your help
kudoo
<style>
#mydiv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: grey;
opacity: .8;
}
.ajax-loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;
}
</style>
<button type="button" data-ng-click="logout()">logout</button>
<div data-ng-controller="CustomersController" class="container">
<strong class="error">{{ error }}</strong>
<!--<div id="mydiv" data-ng-show="loading">
<img src="Images/482.gif" class="ajax-loader" />
</div>-->
<p data-ng-hide="addMode">
<a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a>
</p>
<form name="addCustomer" data-ng-show="addMode" style="width: 600px; margin: 0px auto;">
<label>Name:</label><input type="text" data-ng-model="newcustomer.Name" required />
<label>Email:</label><input type="email" data-ng-model="newcustomer.Email" required />
<br />
<span class="error" data-ng-show="addCustomer.$error.email">Invalid Email format!</span>
<br />
<input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addCustomer.$valid" class="btn btn-primary" />
<input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
<br />
<br />
</form>
<table class="table table-bordered table-hover" style="width: 800px">
<tr>
<th>#id</th>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
<tr>
<td></td>
<td>
<input type="text" data-ng-model="search.Name" /></td>
<td>
<input type="text" data-ng-model="search.Email" /></td>
<td></td>
</tr>
<tr data-ng-repeat="customer in customers | filter:search">
<td><strong data-ng-hide="customer.editMode">{{ customer.CustomerID }}</strong></td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
<p data-ng-show="customer.editMode">
<input type="text" data-ng-model="customer.Name" />
</p>
</td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Email }}</p>
<input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Email" /></td>
<td>
<p data-ng-hide="customer.editMode"><a data-ng-click="toggleEdit(customer)" href="javascript:;">Edit</a> | <a data-ng-click="delcustomer(customer)" href="javascript:;">Delete</a></p>
<p data-ng-show="customer.editMode"><a data-ng-click="save(customer)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(customer)" href="javascript:;">Cancel</a></p>
</td>
</tr>
</table>
<hr />
</div>

Related

Angularjs Inline Edit row not working

Angularjs Inline Edit row not working
When i click edit button all input field is enabled
also this not disabled
<span ng-show="edit != true">{{data.question}}</span>
<tr ng-repeat="data in Value ">
<td>
<span ng-show="edit != true">{{data.question}}</span>
<input ng-show="edit" type="text" ng-model="data.question" class="form-control" placeholder="Name">
</td>
<td>{{dataId.name}}</td>
<td><span id="{{data.id}}" ng-click="editUtterance(data.id)" class="glyphicon glyphicon-pencil edit"></span></td>
</tr>
$scope.edit = 'false';
console.log($scope.edit);
$scope.editUtterance = function(id){
alert(id);
$scope.edit = 'true';
console.log($scope.edit);
}

From what limited data and code you have provided in your question, I have put together a basic PLUNKER which gives you the edit and save functionality in line in a table cell.
The idea is to attach the edit flag (it's better if it's a boolean rather than a string) to each element in the array so we can track which row should be editable. If you set it to scope and use it like you have shown in the code, it will be applied to all rows and all of them will be editable even if your intent was for a single row.
#script.js
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.Value = [{
id: 1,
question: 'question 1',
name: 'name 1'
}, {
id: 2,
question: 'question 2',
name: 'name 2'
}, {
id: 3,
question: 'question 3',
name: 'name 3'
}]
$scope.editUtterance = function(data) {
alert(data.id);
data.edit = true;
console.log(data.edit);
}
$scope.save = function(data) {
data.edit = false;
}
});

Try this
angular.module('demo', ['ui.bootstrap']);
angular.module('demo').controller('DemoCtrl', DemoCtrl);
DemoCtrl.$inject = ['$scope', '$timeout'];
function DemoCtrl($scope, $timeout) {
$scope.Value = [{
id: 1,
question: "Ben"
}, {
id: 2,
question: "Sally"
}, {
id: 3,
question: "John"
}];
$scope.selected = {};
$scope.editContact = function(data) {
$scope.editing = true;
$scope.selected = angular.copy(data);
};
$scope.saveContact = function(id) {
$scope.editing = false;
$scope.Value[id] = angular.copy($scope.selected);
};
}
body {
margin: 20px;
}
#th-name,
#th-age {
width: 40%;
}
#th-actions {
width: 20%;
}
<!DOCTYPE html>
<html ng-app="demo">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.3/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="DemoCtrl">
<h3>ng-show/hide</h3>
<table class="table table-striped">
<thead>
<tr>
<th id="th-name">Question</th>
<th id="th-age">ID</th>
</tr>
</thead>
<tr ng-repeat="data in Value">
<td>
<span ng-show="edit != true">{{data.question}}</span>
<input ng-show="edit" type="text" ng-model="selected.question" class="form-control" placeholder="question">
</td>
<td>
<span ng-show="edit != true">{{data.id}}</span>
<input ng-show="edit" type="text" ng-model="selected.id" class="form-control" placeholder="ID">
</td>
<td>
<button ng-show="edit != true && editing != true" id="table-edit" ng-click="edit = true; editContact(data)"><i class="fa fa-fw fa-pencil"></i></button>
<button ng-show="edit" id="table-save" ng-click="edit = false; saveContact($index)"><i class="fa fa-fw fa-floppy-o"></i></button>
</td>
</tr>
</table>
</body>
</html>

$scope.editContact = function (data) {
debugger;
$scope.editing = true;
$scope.universityModel = angular.copy(data);
};
$scope.CancelEdit = function (event) {
$scope.editing = false;
event.preventDefault();
}
`
<tbody>
<tr ng-repeat="item in UniversityList track by $index">
<td>
<span ng-show="edit != true">{{item.ValueAr}}</span>
<input ng-show="edit" type="text" ng-model="universityModel.ValueAr" class="form-control" placeholder="ValueAr">
</td>
<td>
<span ng-show="edit != true">{{item.ValueEn}}</span>
<input ng-show="edit" type="text" ng-model="universityModel.ValueEn" class="form-control" placeholder="ValueEn">
</td>
<td class="text-center">
<button class="btn green" ng-show="edit != true && editing != true" id="table-edit" ng-click="edit = true; editContact(item)"><i class="fa fa-edit"></i></button>
<button class="btn red" ng-show="edit != true && editing != true" id="table-edit" ng-click="edit = true; DeleteUniversity(item.Id,$index )"><i class="fa fa-trash-o"></i></button>
<button class="btn blue" ng-show="edit" id="table-save" ng-click="edit = false; saveContact($index,$event,universityModel)"><i class="fa fa-fw fa-floppy-o"></i></button>
<button class="btn red" ng-show="edit" id="table-cancel" ng-click="edit = false; CancelEdit($event)"><i class="fa fa-close"></i></button>
<!--<a class="btn green" ng-click="toggleUniversityModal(item,true)"><i class="fa fa-edit"></i></a>
<a class="btn red" ng-click="DeleteUniversity(item.Id,$index )"><i class="fa fa-trash-o"></i></a>-->
</td>
</tr>
</tbody>

Angular JS page loading error

I am new to angular and I tried to create a application to add, update and delete information about the lab test. But when the page is loaded one error occurrs. If anybody knows the reason for this please help me. Thank you.
Error
enter image description here
ManageLabTest.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Lab Test Management</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="../app.module.js"></script>
<script src="../Controller/LabController.js"></script>
<script src="../Controller/main.route.js"></script>
</head>
<body ng-controller="ManageLabTest">
<div id="page">
<div class="header"><img src="../img/logoPCU%20(2).jpg" height="174" width="721"/>
<h1 class="text-info">Lab Test Details Management</h1>
</div>
</div>
<div class="container">
<div class="navigation">
<div class="page-header">
</div>
<div class="well well-lg">
<div class="container-fluid">
<h3><strong>Lab Test Details</strong></h3>
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="form-group">
<label>Patient ID </label>
<input type='text' class="form-control" ng-model="Test.patientID"/>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Test Code</label>
<input type='text' class="form-control"ng-model="Test.testCode" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Test Name</label>
<input type='text' class="form-control" ng-model="Test.testName"/>
</div>
</div>
<div class="container">
<div class='col-md-3 '>
<div class="form-group">
<label>Type</label>
<select ng-model="Test.type" class="form-control">
<option>Select Type</option>
<option>Critical</option>
<option>Non-Critical</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Date</label>
<div ng-model="Prescription.date">{{date | date:'yyyy-MM-dd'}}</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group pull-right" ng-submit="addNew()">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New"/>
<button class="btn btn-warning" id="clear" ng-click="clear()" onclick="enableAddButton()">
Clear
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-header">
<h3><strong>Add Lab Test</strong></h3>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="data-table2">
<tr>
<th> Patient ID </th>
<th> Type </th>
<th> Test Code </th>
<th> Test Name </th>
<th> Date</th>
<th> Edit </th>
<th> Delete</th>
</tr>
<tr ng-repeat="Test in Tests">
<td> {{Test.patientID}} </td>
<td> {{Test.type}} </td>
<td> {{Test.testCode}} </td>
<td> {{Test.testName}} </td>
<td> {{Test.date}} </td>
<td>
<button class="btn btn-warning btn-sm" ng-click="editLab(Test._id)"
onclick="enableUpdateButtons()">Edit <span
class="glyphicon glyphicon-pencil"></span></button>
</td>
<td>
<button class="btn btn-danger btn-sm" ng-click="deleteLab(Test._id)">Delete <span
class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group pull-right">
<button class="btn btn-success btn-sm" ng-click="" onclick="">Save/Send</button>
</div>
</div>
</div>
<div class="page-header">
<h3><strong>Lab Test Details</strong></h3>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="data-table">
<tr>
<th> Patient ID </th>
<th> Type </th>
<th> Test Code </th>
<th> Test Name </th>
<th> Date</th>
<th> Edit </th>
<th> Delete</th>
</tr>
<tr ng-repeat="Test in Tests">
<td> {{Test.patientID}} </td>
<td> {{Test.type}} </td>
<td> {{Test.testCode}} </td>
<td> {{Test.testName}} </td>
<td> {{Test.date}} </td>
<td>
<button class="btn btn-warning btn-sm" ng-click="editLab(Test._id)"
onclick="enableUpdateButtons()">Edit <span
class="glyphicon glyphicon-pencil"></span></button>
</td>
<td>
<button class="btn btn-danger btn-sm" ng-click="deleteLab(Test._id)">Delete <span
class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group pull-right">
<button class="btn btn-success btn-sm" ng-click="" onclick="">Save changers</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
LabController.js
'use strict';
angular.module('app').controller('ManageLabTest', ['$scope', function ($scope) {
getLab();
function getLab() {
$http.get('/').then(response => {
$scope.labs = labs;
$scope.lab = null;
});
};
$scope.clear=function(){
$scope.lab=null;
};
$scope.addLab = () => {
$http.post('/',$scope.lab).then(function(response){
getLab();
});
};
$scope.update = () =>{
$http.put('/'+$scope.lab._id,$scope.lab).then(function(response){
getLab();
clear();
});
};
$scope.edit = () =>{
$http.get('/'+id).then(function(response){
$scope.lab = response.data;
});
};
$scope.remove = () =>{
$http.delete('/'+id).then(function(response){
getLab();
});
};
$scope.Test = [];
$scope.addNew = function (Test) {
$scope.Test.push({
'patientID':"",
'testCode':"",
'testName':"",
'date':""
});
};
$scope.date = new Date();
}]);
Lab.model.js
'use strict';
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const LabTestSchema = new Schema({
patientID: {
type: String,
required: true
},
testCode: {
type: String,
required: true
},
testName: {
type: String,
required: true
},
date: {
type: Date,
required: true
},
type:{
type: String,
required: true
}
});
var LabTest = mongoose.model('LabTest', LabTestSchema);
module.exports = LabTest;
app.module.js
angular.module('app',['ngRoute']);
server.js
const bodyParser = require('body-parser'),
express = require('express'),
mongoose = require('mongoose');
mongoose.Promise = global.Promise;
require('./Interface/DataModel/prescription.model.js');
require('./Interface/DataModel/Lab.model.js');
const PresRouter = require('./Interface/Routers/Prescription.route.js');
const LabRouter = require('./Interface/Routers/Lab.route.js')
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended':'true'}));
mongoose.connect('mongodb://localhost:27017/PCU', err => {
if (err) {
console.log(err);
process.exit(1);
}
}
);
app.use(express.static(__dirname+'/Interface'));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/Interface/Pres&Labs/ManageLabTest.html');
});
app.use('/',PresRouter);
app.use('/',LabRouter);
app.listen(3000, err => {
if (err) {
console.error(err);
return;
}
console.log('app listening on port 3000');
});
Lab.route.js
'use strict';
const express = require('express');
const mongoose = require('mongoose');
mongoose.set('debug', false);
const router = express.Router();
const LabModel = require('../DataModel/Lab.model.js');
router.get('/',function (req,res) {
LabModel.find().then(labs => {
res.json(labs);
}).catch(err => {
console.error(err);
res.sendStatus(500);
});
});
router.post('/',function (req,res) {
const lab = new LabModel(req.body);
labs.save().then(labs => {
res.json(labs);
}).catch(err => {
console.error(err);
res.sendStatus(500);
});
});
router.get('/:id',function (req,res) {
LabModel.findById(req.params.id).then(data=>{
res.json(data || {});
}).catch(err=>{
console.error(err);
res.sendStatus(500);
});
});
router.put('/:id',function (req,res) {
const data = req.body;
delete data._id;
const Id = req.params.id;
LabModel.findByIdAndUpdate(Id,{$set:data}).then(db=>{
res.json(data);
}).catch(err => {
console.error(err);
res.sendStatus(500);
});
});
router.delete('/:id',function (req,res) {
LabModel.findByIdAndRemove(req.params.id).then(data=>{
res.sendStatus(200,'success');
});
});
module.exports = router;
main.route.js
angular.module('app').config(['$routeProvider'],function ($routeProvider) {
$routeProvider
.when('/ManagePrescription',{
templateUrl : 'ManagePrescription.html',
controller : 'ManagePrescription'
})
.when('/ManageLabTest',{
templateUrl : 'ManageLabTest.html',
controller : 'ManageLabTest'
})
.when('SearchPrescription',{
templateUrl : 'SearchPrescription.html',
controller : 'ManagePrescription'
})
.when('SearchLabTest',{
templateUrl : 'SearchLabTest.html',
controller : 'ManageLabTest'
});
});

There is syntax error in main.route.js
you are defining your function out of Array..
angular.module('app').config(['$routeProvider'],function ($routeProvider) {
//YOUR LOGIC
});
The code should look like as below
angular.module('app').config(['$routeProvider',function ($routeProvider) {
//YOUR LOGIC
}]);

pushed data is not refelcting in a table using angular

the pushed data from the model is not reflecting in the first table. It is there in console. The fiddle link is attached with this please help me on this.
fiddle link ---- http://jsfiddle.net/8MVLJ/2649/
html=========
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script>
<div class="container" ng-app="app" ng-controller="Controller">
<div class="row">
<div class="col-xs-12">
<table class="table table-striped table-bordered">
<thead>
<th>Attribute Name</th>
<th>Attribute Value</th>
</thead>
<tbody>
<tr ng-repeat="newdetail in newDetails">
<td>
<p ng-model="detail">{{newdetail.attrName}} </p>
</td>
<td>
<p ng-model="detailValue">{{newdetail.userAttrValue}} </p>
</td>
</tr>
</tbody>
</table>
<a class="btn btn-default" href ng-click="show()">Select Attribute</a>
<script type="text/ng-template" id="modal.html">
<div class=" ngdialog-messsage modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<table class="table table-striped table-bordered">
<thead>
<th>
<input type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}">
</th>
<th>Attribute Name</th>
<th>Attribute Value</th>
</thead>
<tbody>
<tr ng-repeat="detail in details">
<td>
<input type="checkbox" ng-model="detail.Selected">
</td>
<td>
<p ng-model="detail">{{detail.attrName}}</p>
</td>
<td>
<select ng-model="detail.user_attr_value" ng-init="detail.user_attr_value=detail.attr_value_Ind.split(',')[0]" class="form-control full-width">
<option ng-repeat="option in detail .attr_value_Ind.split(',')" value="{{option}}">{{option}}</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<input type="button" class="btn btn-primary" value="Add Selected" ng-click="add();close('Cancel')">
<input type="button" class="btn btn-danger " ng-click="checkAll(details.length)" value="Clear">
</div>
</div>
</div>
</div>
</div>
</script>
</div>
</div>
</div>
js===================
var app = angular.module('app', ['angularModalService']);
app.controller('Controller', function($scope, $element, ModalService) {
$scope.newDetails = [{
"attrName": "userType",
"userAttrValue": "Customer",
"userOrGroupId": "aaaazzz8522",
}];
$scope.add = function() {
angular.forEach($scope.details, function(detail) {
if (detail.Selected == true) {
$scope.newDetails.push({
'attrName': detail.attrName,
'attrName': detail.user_attr_value
});
$element.modal('hide');
close($scope.newDetails, 500);
console.log("loop", $scope.newDetails);
}
});
};
$scope.show = function() {
ModalService.showModal({
templateUrl: 'modal.html',
controller: "Controller"
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {});
});
};
//=================================================
$scope.close = function(result) {
close(result, 600);
};
$scope.details = [{
"attrName": "region",
"attrType": "USER",
"attr_value_Ind": "CHN-N,CHN-S,CHN-C",
"buId": "DEFAULT",
}];
var getAllSelected = function() {
var selecteddetails = $scope.details.filter(function(detail) {
return detail.Selected;
});
return selecteddetails.length === $scope.details.length;
}
var setAllSelected = function(value) {
angular.forEach($scope.details, function(detail) {
detail.Selected = value;
});
}
$scope.allSelected = function(value) {
if (value !== undefined) {
return setAllSelected(value);
} else {
return getAllSelected();
}
}
$scope.checkAll = function(Count) {
angular.forEach($scope.details, function(details) {
details.Selected = false;
});
};
});

i have updated your fiddle please check and review.http://jsfiddle.net/8MVLJ/2652/
it's not pushing it's value because you have pass scope in your modal controller and set parent scope like this
ModalService.showModal({
templateUrl: 'modal.html',
controller: "Controller",
scope:$scope <-- added here scope
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {});
});
and add $parent to push your value like this
$scope.$parent.newDetails.push({ <-- added $parent here
'attrName': detail.attrName,
'userAttrValue': detail.user_attr_value
});

After injecting $http, code is not displaying the table in angular.js

I am a beginner in anular.js. I'm trying to write a code which add and removes rows in a table on button click and once done ad user clicks on createdelivery button I want to send the data as a JSON object to server.
But when am injecting $http as follows,
var app = angular.module("createDelivery", []);
app.controller("MyController", ['$scope', 'http', function($scope, $http)
it doesn't create the table also.
Please help me to solve the issue.
<html>
<head>
<title>Add Rows</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
var app = angular.module("createDelivery", []);
app.controller("MyController", ['$scope', 'http', function($scope, $http) {
$scope.deliveryDetails = [
{
'fname':'Muhammed',
'lname':'Shanid',
'email':'shanid#shanid.com'
},
{
'fname':'Roy',
'lname':'Mathew',
'email':'roy#roy.com'
}];
$scope.addNew = function(cdDetails){
$scope.deliveryDetails.push({
'fname': "",
'lname': "",
'email': "",
});
};
$scope.remove = function(){
var newDataList=[];
$scope.selectedAll = false;
angular.forEach($scope.deliveryDetails, function(selected){
if(!selected.selected){
newDataList.push(selected);
}
});
$scope.deliveryDetails = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.deliveryDetails, function(cdDetails) {
cdDetails.selected = $scope.selectedAll;
});
};
$scope.getData = function(cdDetails)
{
alert("Check");
var jsonString;
jsonString = angular.toJson(cdDetails);
//JSON.stringify(jsonString);
$http
({
url: "/scheduler/createDelivery",
dataType: 'json',
method: 'POST',
data: jsonString
}).success(function(response) {
alert("success : : "+jsonString);
$scope.value = response;
}).error(function(error) {
alert("error::"+error);
});
//window.location.reload();
//document.write("\nString value "+jsonString);
};
}]);
</script>
</head>
<body ng-app="createDelivery" ng-controller="MyController">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cdDetails in deliveryDetails">
<td>
<input type="checkbox" ng-model="cdDetails.selected"/></td>
<td>
<input type="text" class="form-control" ng-model="cdDetails.fname" required/></td>
<td>
<input type="text" class="form-control" ng-model="cdDetails.lname" required/></td>
<td>
<input type="email" class="form-control" ng-model="cdDetails.email" required/></td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!deliveryDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
<button type="button" name = "createDelivery"class="col-sm-2 btn btn-primary" style="width:25%" ng-click="getData(cdDetails);">Create Delivery</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

app.controller("MyController", ['$scope', 'http'
One mistake in code is above. Change it and try. you must inject $http

angularjs ui tab + post request

I have simple angularjs tab on html and i want to post the data to rest based api.
My Query is how to get the control value from tab and post to rest based api
Here i my code...
I have tired several example to getting tabs,but got no success.
validationApp.controller('TabsCtrl', function($scope, $http, $location, $window, $routeParams) {
var headerValue = $routeParams.auth;
alert(headerValue);
$scope.tabs = [{
title: 'Upload Configuration',
url: 'upload.tab.html'
}
];
$scope.currentTab = 'upload.tab.html';
$scope.onClickTab = function(tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
$scope.uploadFile = function(vmUploadme, myName) {
var fd = new FormData();
//Take the first selected file
// fd.append("file", files[0]);
debugger;
fd.append("file", $scope.vmUploadme);
fd.append("name", $scope.myName);
alert($routeParams.auth);
uploadUrl = "MyLinktoRESTBASEAPIupload1";
$http.post(uploadUrl, fd, {
withCredentials: true,
headers: {
'Content-Type': undefined,
'Authorization': $routeParams.auth
},
transformRequest: angular.identity
}).
success(function(data, status, headers, config) {
alert(data);
//TODO
}).
error(function(data, status, headers, config) {
alert("failure");
});
};
});
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
border: 1px solid #000;
border-bottom-width: 0;
margin: 3px 3px 0px 3px;
padding: 5px 2px 5px 5px;
background-color: #CCC;
font: 12px tahoma, arial, verdana, sans-serif;
color: #696969;
}
#mainView {
border: 1px solid black;
clear: both;
padding: 0 1em;
height: 450px;
}
.active {
background-color: #FFF;
color: #000;
}
</style>
<!DOCTYPE html>
<html>
<head>
<!-- JS -->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="script/angular/js/angular.js"></script>
<script src="script/angular/js/angular-route.min.js"></script>
<script src="script/angular/js/ngProgress.js"></script>
<script src="script/custom/js/app.js"></script>
<script src="script/custom/js/landingPage.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body id="ng-app" ng-app="LoginApp">
<script type="text/ng-template" id="html/login.html">
<div ng-controller="mainController">
<form name="userForm" ng-submit="submitForm()" novalidate>
<div id="area" class="area">
</div>
</form>
</div>
</script>
<div ng-view></div>
<script type="text/ng-template" id="html/landingPage.html">
<div id="tabs" ngController="TabsCtrl" class="area">
<table class="stdTable" border="0">
<tr>
<td>
<table width="100%" height="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<cols width="95%">
<cols width="5%">
<tr>
<td rowspan="3" align="center">
<h2> Landing Page</h2>
</td>
<td align="right">
<a ng-click="logout();">
<label class="avLogin-Label">Logout</label>
</a>
</td>
</tr>
<tr>
<td align="right">
<label class="avLogin-Label">Status:Running</label>
</td>
</tr>
<tr>
<td align="right">
<label class="avLogin-Label">Welcome:Administrator</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="100%">
<ul>
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</td>
</tr>
</table>
</div>
</script>
<script type="text/ng-template" id="upload.tab.html">
<div id="viewOne">
<h1>View One</h1>
<input type="text" name="name" ng-model="myName" />
<input type="file" fileread="vmUploadme" />
<input type="button" name="button" value="Upload" ng-click='uploadFile(vmUploadme,myName)' />
</div>
</script>
<script type="text/ng-template" id="bulk.tab.html">
<div id="viewTwo">
<h1>View Two</h1>
<h2> Bulk User Setup </h2>
{{message}}
</div>
</script>
</body>
</html>

The Problem was with scope of div in angularjs
$scope.upload = { fileName: '', uploadFile: '' };
$scope.uploadFile = function(){
alert($scope.upload.uploadFile);
}

Resources