I have code to pass date and time to controller.
Here is HTML code,
<div class="page-content" ng-app="app">
<div ng-controller="postAppoinmentCtr as ctrl" class="panel-body">
<form ng-submit="submitForm()" id="form1">
<input name="time" ng-model="time" type="text" class="form-control" ng-model="time" data-plugin="timepicker" autocomplete="off"/>
<input name="date" ng-model="date" type="text" class="form-control" data-plugin="datepicker"/>
<input..ng-model="type"...></input>
<input..ng-model="Description"...></input>
<button ...>
</form>
</div>
</div>
Here is angular js part
var app = angular.module('app', []);
app.controller('postAppoinmentCtr', function($scope, $http, $location) {
$scope.submitForm = function(){
var url = $location.absUrl() + "/addAppoinment";
alert(url);
var config = {
headers : {
'Content-Type': 'application/json;charset=utf-8;'
}
}
var data = {
type: $scope.type,
date: $scope.date,
time: $scope.time,
description: $scope.description
};
$http.post(url, data, config).then(function (response) {
$scope.postResultMessage = "Sucessful!";
}, function (response) {
$scope.postResultMessage = "Fail!";
});
$scope.type = "";
$scope.date = "";
$scope.time ="";
$scope.description ="";
}
});
When click the button type and description pass to controller. But date and time not. I can do this using
<input id="date-birth" class="form-control" type="date" ng-model="date">
this line. But I need to use data-plugin="datepicker" .
I'm new one for the angularjs and I try to many ways for solve this problem.
Please give me some answer this. Thanks in advance.
Related
The script will not just return the values I require from my JSON. I require name from JSON
The following generates an auto suggest when I type in some value in the input field.
Reference: http://plnkr.co/edit/08vi4ncjLrWfUBjWrZKS?p=preview
However, this does not return any JSON values in my code:
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myController', function($scope, $http){
$scope.getAirport = function(inp){
return $http.get('https://raw.githubusercontent.com/vedvasa/airports/master/airports.json', {
params: {
name : inp,
sensor : false
}
}).then(function(res){
var names = [];
angular.forEach(response.data.records, function(item){
names.push(item.addedNames);
});
return names;
});
};
$scope.on_item_selected=function($item, $model, $label)
{
$scope.selected_item = $item;
}
});
</script>
<div ng-app="myApp" ng-controller="myController">
<form>
<input type="text" class="form-control" id="source" placeholder="Enter Airport Code or City Name" ng-model="asyncSelected" typeahead="name for name in getAirports($viewValue)" typeahead-loading="loadingAirports" typeahead-on-select="on_item_selected($item, $model, $label)">
</form>
</div>
Your are using response instead of res
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myController', function($scope, $http){
$scope.getAirport = function(inp){
return $http.get('https://raw.githubusercontent.com/vedvasa/airports/master/airports.json', {
params: {
name : inp,
sensor : false
}
}).then(function(response){ // <---- I changed this to response
var names = [];
angular.forEach(response.data.records, function(item){
names.push(item.addedNames);
});
return names;
});
};
$scope.on_item_selected=function($item, $model, $label)
{
$scope.selected_item = $item;
}
});
</script>
<div ng-app="myApp" ng-controller="myController">
<form>
<input type="text" class="form-control" id="source" placeholder="Enter Airport Code or City Name" ng-model="asyncSelected" typeahead="name for name in getAirports($viewValue)" typeahead-loading="loadingAirports" typeahead-on-select="on_item_selected($item, $model, $label)">
</form>
here save the ng-model is newattendance saving to database. "newattendance._id" is not taken as a ng-model.how to make it "newattendance._id" is ng-model
<select class="form-control" ng-options="item.empcode as item.empcode for item in totemplist" ng-model="item.empcode">
</select>
<input type="text" ng-repeat="newattendance in totemplist" ng-model="newattendance._id" ng-show="item.empcode ==newattendance.empcode" style="width:200px;" ><br>
<input placeholder="Enter Attendacne Date" ng-model="newattendance.doa">
<button class="btn btn-primary" ng-click="checkOut()">checkOut</button>
Controller
EmpMasterController.controller("AttendanceController", ['$scope', 'AttendanceFactory',"EmpAddService", function($scope, AttendanceFactory,EmpAddService){
$scope.newattendance={};
$scope.totemplist=EmpAddService.getAllEmpAddItems();
console.log($scope.totemplist);
$scope.checkIn = function(){
AttendanceFactory.addAttendance($scope.newattendance);
$scope.newattendance = {}
}
$scope.getAllAttendance = function(){
console.log("$$$$$"+$scope.newattendance._id)
$scope.attendancedetails =AttendanceFactory.getAllAttendance($scope.newattendance._id);
}
}])
Factory
EmpFactModule.factory("AttendanceFactory", function($resource, RES_URL){
var attendanceResource = $resource(RES_URL+"attandence/:id/:attid",
{"id": "#id", "attid": "#attid"}, {update: {method: "PUT"}})
var attendanceDetails;
return {
addAttendance: function(newattendance){
console.log("..1.. " + newattendance._id)
attendanceResource.save({"id":newattendance._id}, newattendance, function(data){
console.log("Add Success ")
}, function(data, status){
console.log("Add Failed*****");
})
},
getAllAttendance: function(_id){
console.log("..#.. " + _id)
attendanceDetails = attendanceResource.query({"id": _id});
return attendanceDetails;
},
}
})
please help me how make it as ng-model and how to save this...
I've create a JSFiddle for you which hopefully will help you understand the 2 way binding in angular.
you dont need to pass the newattendance object to the check-out function, it is already saved on the scope.
HTML:
<div ng-app="app">
<div ng-controller="formValidation">
<div>
<div>
<span>User Name</span>
<input type="text" placeholder="John" ng-model="newattendance._id">
<span>
<button ng-click="submit()">
check out
</button>
</span>
</div>
</div>
<pre>{{newattendance._id}}</pre>
</div>
</div>
JS:
var app = angular.module('app', []);
app.controller('formValidation', function($scope) {
$scope.submit=function(){
var formPost = {
"Username":$scope.newattendance._id
};
console.log(formPost);
}
});
I use the following ng-model with ng-repeat and I tried to access the data in my controller but it seems that the data cant be accessed there.
<div ng-controller="myCtrl" class="container">
<fieldset data-ng-repeat="contact in choices">
<input class="form-control" ng-model='contact.firstname'>
<input class="form-control" ng-model='contact.lastname'>
<input class="form-control" ng-model='contact.email'>
<input class="form-control" ng-model='contact.contact'>
<input class="form-control" ng-model='contact.adress'>
<input class="form-control" ng-model='contact.city'>
<input class="form-control" ng-model='contact.state'>
<button class="btn btn-primary" ng-click="addcontact()">Add</button></td>
</fieldset>
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<div id="choicesDisplay">
{{ choices }}
</div>
</div>
</div>
</div>
And use the following ng-app
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.choices = [{
id: 'choice1'
}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({
'id': 'choice' + newItemNo
});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length - 1;
$scope.choices.splice(lastItem);
};
var refresh = function() {
$http.get('/contactlist').success(function(response) {
console.log("in m new controler now");
$scope.contactlist = response;
$scope.contact = "";
});
};
refresh();
$scope.addcontact = function() {
console.log($scope.contact);
$http.post('/contactlist', $scope.contact).success(function(response)
{
console.log(response);
refresh();
});
};
});
I can't access the data in $scope for the dynamically added controls through ng-repeat
In order to acess the data you should use
$scope.choices[index]
Index is the number of index you want to acces
I have a multiple for filed which have a same name in array formate like
<input type='text' name="frm[]">. I want to submit this in AngularJS and get value in PHP.
my script:
<input type="text" name="textval" id="textval1" ng-model="data.textvalt[1]" >
<input type="text" name="textval" id="textval2"ng-model="data.textvalt[2]">
<input type="text" name="textval" id="textval3" ng-model="data.textvalt[3]">
Use Angular's $http service to post the data to your php file.
Check the below code
<html ng-app="submitExample">
<script type="text/javascript" src="lib\angular.js"></script>
<script type="text/javascript" src="index.js"></script>
<form ng-submit="submit()" ng-controller="FormController">
Enter text and hit enter:
<input type="text" name="textval" id="textval1" ng-model="data.textvalt[1]" >
<input type="text" name="textval" id="textval2"ng-model="data.textvalt[2]">
<input type="text" name="textval" id="textval3" ng-model="data.textvalt[3]">
<input type="submit" id="submit" value="Submit" />
</form>
<html>
var app = angular.module('submitExample', [])
app.controller('FormController', ['$scope','$http', function($scope,$http) {
$scope.data = {};
$scope.data.textvalt = new Array();
$scope.data.textvalt[1] = '';
$scope.data.textvalt[2] = '';
$scope.data.textvalt[3] = '';
$scope.submit = function() {
var configObject = {
method: 'POST',
url: 'index.php',
data: { textval1: $scope.data.textvalt[1] , textval2 : $scope.data.textvalt[2], textval3 : $scope.data.textvalt[3] }
}
$http(configObject).then
(function successCallback(response) {
console.log("posted sucuessfully");
},
function errorCallback(response) {
console.log("Failed");
});
};
}]);
Some what new to the MEAN stack. Currently I'm reworking an small app I did through codeschool to be full MEAN stack.
The app created can be seen here
Code School app
In rewriting the app using the MEAN stack after submitting the form I must refresh the page to see the city added to the list. What do I need to fix so I don't need to refresh the page for the new Item to be added to the list?
If I'm missing any relevant code below here is my git hub link
git hub link
Here is my code:
angular.module('Cityapp').controller('CityIndexController', function(City, $scope){
$scope.cities = City.query();
window.sc = $scope;
});
angular.module('Cityapp').controller('CityCreateController', function(City, $scope, $http){
$scope.city = new City();
$scope.saveCity = function(city){
$http({
method: 'POST',
url: '/city',
data: city})
.success( function(data, status, headers, config){
console.log($scope.city);
console.log(data);
console.log($scope.city);
}).
error(function(data,status,headers,config){
jQuery('.alert').show();
console.log('nope');
});
};
});
<form ng-controller="CityCreateController">
<legend> New City</legend>
<input for="City-group" name="City" id="City" type="text" ng-model="city.city" placeholder="City Name">
<input for="City-group" name="desc" id="desc" type="text" ng-model="city.desc" placeholder="Description">
<input type="submit" class="btn btn-default" ng-click="saveCity(city)"/>
</form>
<ul ng-controller="CityIndexController" class="city-list">
<li ng-repeat="city in cities">
<a href="#">
{{city.city}}</a></li>
</ul>
It should looks something like that
;(function() {
function Cities($http) {
function City() {
}
City.prototype.save = function() {
return $http.post('/api/city', this);
};
City.cities = [];
City.add = function(city) {
city.save().then(function() {
City.cities.push(city);
});
};
City.getAll = function() {
$http.get('/api/cities').then(function(response) {
City.cities = response.data.map(function(data) {
return new City(data);
});
return cities;
});
};
return City;
}
function CityCreateController(Cities) {
var mv = this;
mv.city = new Cities();
mv.saveCity = function() {
Cities.add(mv.city);
};
}
function CityIndexController($scope, Cities) {
var mv = this;
$scope.$watchCollection(function() {
return Cities.cities;
}, function(cities) {
mv.cities = cities || [];
});
Cities.getAll();
}
angular
.module('app', [])
.factory('Cities', ['$http', Cities])
.controller('CityCreateController', ['Cities', CityCreateController])
.controller('CityIndexController', ['$scope', 'Cities', CityIndexController]);
})();
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<meta charset="utf-8">
</head>
<body ng-app="app">
<form ng-controller="CityCreateController as mv">
<legend> New City</legend>
<input for="City-group" name="City" id="City" type="text" ng-model="mv.city.city" placeholder="City Name">
<input for="City-group" name="desc" id="desc" type="text" ng-model="mv.city.desc" placeholder="Description">
<input type="submit" class="btn btn-default" ng-click="mv.saveCity()"/>
</form>
<ul ng-controller="CityIndexController as mv" class="city-list">
<li ng-repeat="city in mv.cities">
<a href="#">
{{city.city}}</a></li>
</ul>
</body>
</html>
Found a simple fix
angular.module('Cityapp').controller('CityCreateController', function(City, $scope, $http){
$scope.cities = City.query();
$scope.city = new City();
$scope.saveCity = function(city){
$http({
method: 'POST',
url: '/city',
data: city})
.success( function(data, status, headers, config){
$scope.cities.push({city: $scope.city.city,
desc: $scope.city.desc});
}).
error(function(data,status,headers,config){
jQuery('.alert').show();
console.log('nope');
});
};
});
Just added the
$scope.cities.push({city: $scope.city.city,
desc: $scope.city.desc});
to the .success. Works like it should. Now on to my next issue.