Passing object to function in angular js - angularjs

Here I am trying to pass user entered data in to angular function so that i can send it to server. but data is not receing in function.
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$scope.submitForm = function (data) {
console.log(data + " " + data.fname + " " + data.lname);
$http({
method: 'POST',
url: "update",
data: data,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (result) {
console.log(result);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="update">
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for=fname">First Name</label>
</div>
<div class="col-lg-8 col-md-8">
<input type=text" class="form-control" id="fname" name="fname" placeholder="First Name"
ng-bind="user.fname" data-validation="required" data-validation-error-msg="First Name required"/>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="lname">Last Name</label>
</div>
<div class="col-lg-8 col-md-8">
<input type=text" class="form-control" id="lname" name="lname" placeholder="Last Name"
ng-bind="user.lname" data-validation="required" data-validation-error-msg="Last Name required"/>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="submit" class="sr-only" >submit</label>
</div>
<div class="col-lg-8 col-md-8">
<input type="submit" class="form-control btn btn-success" id="update"
ng-click="submitForm(user)"
name="submit" placeholder="Submit"/>
</div>
</div>
</form>
</div>

Instead of ng-bind use ng-model
ng-bind="user.fname" ---> ng-model="user.fname",
use this for all form elements.

Related

angularjs issue with (error catch is not a function)

Hi I need some minor direction. I can pull the data in the viewCtrl but every time i go to add a new contact, the issue I get is $http(..)then(..)catch is not a function at oBJECT.$scope.addContact I have no idea what is causing this?
Its also not allowing me to "POST" but I am able to "GET". Can anyone see whats wrong with what i am doing?
var app = angular.module('app', []);
app.controller('viewCtrl', function($scope, $http) {
var url = "https://";
$http({
method: "GET",
url: url,
headers: {
"accept": "application/json;odata=verbose"
}
}).success(function(data, status, headers, config) {
$scope.contacts = data.d.results;
console.log($scope.contacts);
}).error(function(data, status, headers, config) {});
});
app.controller('addItemsController', function($scope, $http) {
var url = "https://";
$scope.addContact = function() {
return $http({
headers: {
"Accept": "application/json; odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
},
method: "POST",
url: url,
data: {
'Lastname': $scope.Lastname,
'Firstname': $scope.Firstname
}
})
.then(saveContact)
.catch(function(message) {
console.log("addContact() error: " + message);
});
function saveContact(data, status, headers, config) {
alert("Item Added Successfully");
return data.data.d;
}
}
//console.log("an item has been added!");
});
app.controller('editItemsController', function($scope) {
$scope.editItem = function() {
console.log("an item can now be edited!");
}
});
app.controller('deleteItemsController', function($scope) {
$scope.deleteItem = function() {
console.log("item has been deleted");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">
<body ng-app="myapp">
<div ng-controller="viewCtrl">
<div ng-repeat="contact in contacts">
{{contact.ID}}: {{contact.Lastname}}, {{contact.Firstname}}
<button>Edit</button>
<button>Delete</button>
<br />
</div>
</div>
<h3>Add Contacts</h3>
<div ng-controller="addItemsController">
<div class="Table">
<div class="Row">
<div class="Cell">
First Name :
</div>
<div class="Cell">
<input type="text" id="Firstname" ng-model="Firstname" />
</div>
</div>
<div class="Row">
<div class="Cell">
Last Name :
</div>
<div class="Cell">
<input type="text" id="Lastname" ng-model="Lastname" />
</div>
</div>
<div class="Row">
<div class="Cell">
</div>
<div class="Cell">
<input type="button" id="btnAddContact" value="Add Contact" ng-click="addContact()" />
<input type="button" id="btnAddContact2" value="Add Contact" ng-click="addItem()" />
</div>
</div>
</div>
</div>
<hr />
<h3>Edit Contacts</h3>
<div ng-controller="editItemsController">
<div class="Table">
<div class="Row">
<div class="Cell">
ID :
</div>
<div class="Cell">
<input type="text" id="itemId" ng-model="itemId" />
</div>
</div>
<div class="Row">
<div class="Cell">
First Name :
</div>
<div class="Cell">
<input type="text" id="firstName" ng-model="firstName" />
</div>
</div>
<div class="Row">
<div class="Cell">
Last Name :
</div>
<div class="Cell">
<input type="text" id="lastName" ng-model="lastName" />
</div>
</div>
<div class="Row">
<div class="Cell">
</div>
<div class="Cell">
<input type="button" id="btnEditContact" value="Edit Contact" ng-click="editItem()" />
</div>
</div>
</div>
</div>
<hr />
<h3>Delete Contacts</h3>
<div ng-controller="deleteItemsController">
<div class="Table">
<div class="Row">
<div class="Cell">
ID :
</div>
<div class="Cell">
<input type="text" id="itemId" ng-model="itemId" />
</div>
</div>
<div class="Row">
<div class="Cell">
</div>
<div class="Cell">
<input type="button" id="btnDelContact" value="Delete Contact" ng-click="deleteItem()" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I see some mismatch between function on
onviewCtrl
$http(...).success(...).error(...)
while on addItemsController
$http(...).then(...).catch(...)
use which code you are available on

angular post is sending null value to server

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.submitForm = function(cl) {
console.log(cl);
$http({
method: 'POST',
url: "updated-profile",
data: {
cl: cl
},
}).then(function successCallback(response) {
console.log("updated successfully");
$scope.success = "Updated successfully";
}, function errorCallback(response) {
console.log("not updated");
$scope.error = "Unable to update";
});
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="cl in clientList">
<div id="error-messages" ng-show="error">{{error}}</div>
<div id="success" ng-show="success">{{success}}</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="fname">First Name</label>
</div>
<div class="col-lg-8 col-md-8 ">
<input type="text" class="form-control" placeholder="First Name" ng-model="cl.fname" />
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="lname">Last Name</label>
</div>
<div class="col-lg-8 col-md-8">
<input type="text " class="form-control" ng-model="cl.lname" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-4 col-md-4">
<label for="submit" class="sr-only">Update</label>
</div>
<div class="col-lg-8 col-md-8">
<input type="button" class="form-control btn btn-success" id="update" ng-click="submitForm(cl)" name="Update" value="Update" />
</div>
</div>
</div>
I am using above code to send data to server.
My server code is
public class Update extends ActionSupport {
private Client cl = new Client();
private String fname;
public String update() {
System.out.println("testing this");
System.out.println("client detail " + cl.getFname() + " " +
cl.getLname());
System.out.println("fname"+getFname());
}
}
I am getting
client detail null null
fnamenull
If I am using data: {fname: cl.fname}, then also fnamenull.
I am unable to pass any value using angular post to action.
What is wrong here?
What changes to made here to work it properly?
Your button
<input type="button" class="form-control btn btn-success" id="update" ng-click="submitForm(cl)" name="Update" value="Update" />
has to be inside the ng-repeat loop, otherwise it will not have access to the cl object as that is local to the ng-repeat scope.
Alternatively, if you want the button to be "global", you can submit the entire clientList in the ng-submit and then loop through the array inside your controller. It depends on your flow and what kind of UX/UI you need for the project.
$http({
method: 'POST',
url: "www.mylocalhost.com/api/updated-profile",
data: {
cl: cl
},
});
When you are calling a $http service "url" parameter shoul contain a proper api path. just use a valid api url . I hope it will work.
Or
change "cl":$scope.clientList

Materializecss form with angularjs not submiting

I am using materializecss and my project uses angularjs as well.I have a form which looks like this.Both html and js are attached.The problem is that when i press submit no data is passed from the form.The relevant add function is called.In console it shows that the variable test is {} after stringify.I am not understanding why.Please help.Any help would be appreciated .(i have defined ng-app in the main file.Havent attached that here)
app.controller("MyAddController", function($scope, $http) {
$scope.test = {};
$scope.add = function() {
console.log("------------>"+JSON.stringify($scope.test));
$http({
url: "rest/leave/create",
method: "POST",
data: JSON.stringify($scope.test),
headers: {'Content-Type': 'application/json'}
}).success(function(data, status, headers, config) {
if (data) {
$scope.data = data;
alert("success");
}
}).error(function(data, status, headers, config) {
alert("error");
})
}
});
<!-- Modal Structure -->
<div id="modal1" class="modal" ng-controller="MyAddController">
<div class="modal-content">
<h4>Apply Leave</h4>
<div class="row">
<form class="col s12">
<div class="row modal-form-row">
<div class="input-field col s6">
<input id=num" type="text" class="validate" ng-bind="test.num">
<label for="num">num</label>
</div>
<div class="input-field col s6">
<input id="ename" type="text" class="validate" ng-bind="test.Title">
<label for="ename">Employee Name</label>
</div>
</div>
<div class="row modal-form-row">
<div class="input-field col s5">
<input id="startDate" type="text" class="validate" value="{{selectionDate.startdate}}" ng-bind="test.StartAt">
</div>
<div class="input-field col s5">
<input id="endDate" type="text" class="validate" value="{{selectionDate.enddate}}" ng-bind="test.EndAt">
</div>
<div class="input-field col s2">
<p>
<input type="checkbox" id="test6" value="yes" ng-bind="isFull"/>
<label for="test6">Half Day</label>
</p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="description" type="text" class="validate" ng-bind="test.Description">
<label for="description">Description</label>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button class="btn waves-effect waves-light" type="submit" ng-click="add()" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
Change ng-bind to ng-model for two way data binding --- view to controller
and you are also missing quotes in
<input id=num" type="text" class="validate" ng-bind="test.num">
Plunker

AngularJS Validations for multiple fields

I need one example for validations on dynamic added fields. Here is my page.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js">
</script>
<title>Add Remove in AngularJS</title>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.deleted = [];
$scope.inputs = [];
$scope.addRow = function(){
$scope.inputs.push({name:'', age:''});
};
$scope.removeRow = function(index, input){
// alert(index);
// alert(input);
$scope.deleted.push(input);
$scope.inputs.splice(index,1);
};
});
</script>
</head>
<body style="background-color: gray; margin-top: 10px; ">
<center>
<div class="row" ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-6">
<div class="panel panel-flat">
<div class="panel-header">
<h4>
Person Address
<button ng-click="addRow()">Add</button>
</h4>
</div>
<div class="panel-body">
<form name="form" class="form-horizontal">
<div ng-repeat="input in inputs">
<div class="form-group" ng-class="{'has-error' : form.name.$invalid}">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name[$index]" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span class="help-block" ng-show="form.name[$index].$error.pattern">Alphabet only</span>
<span class="help-block" ng-show="form.name[$index].$error.minlength">Too Short</span>
<span class="help-block" ng-show="form.name[$index].$error.maxlength">Too Long</span>
<span class="help-block" ng-show="form.name[$index].$error.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span ng-show="form.age.$invalid && form.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button ng-click="removeRow($index, input)">Remove</button>
<hr>
</div>
</form>
</div>
</div>
</div>
<!-- inputs :{{inputs}}<br>deleted : {{deleted}} -->
</div>
</center>
</body>
</html>
You can add a fonction to you controller :
app.controller('myCtrl', function($scope) {
//...
$scope.validationFn = function () {
//do you validation here
};
then you just need to modify
<form name="form" class="form-horizontal" ng-submit="validationFn()">
Here is the answer:
<div class="panel-body"><form name="form" class="form-horizontal">
<div ng-repeat="input in inputs"><ng-form name="sfIn"><div class="form-group" >
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span
class="help-block" ng-show="sfIn.name.$error.pattern">Alphabet only</span>
<span
class="help-block" ng-show="sfIn.name.$error.minlength">Too Short</span>
<span
class="help-block" ng-show="sfIn.name.$error.maxlength">Too Long</span>
<span
class="help-block" ng-show="sfIn.name.$touched.required || sfIn.name.$error.required ||
sfIn.name.$dirty.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span
ng-show="sfIn.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button
ng-click="removeRow($index, input)">Remove</button>
</ng-form>
<hr>
</div>
</form>
</div>

Angular with Bootstrap Modal

I have a modal page that works if I request it with its own URL but If request it as modal, modal page popup works but angular is not working. I see {{post.name}} in name input.
I am calling my modal page with:
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/edit?brandid={{post.brandid}}" data-toggle="modal"><tags:label text="edit"/></a>
Here is my modal page:
<%#page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div id="content" class="span6" data-popup="modal">
<div class="row-fluid sortable">
<div class="box span12" ng-app="myApp">
<div class="box-content">
<form class="form-horizontal" action='/admin.brands/update' data-toggle="validate" method="post" ng-controller="PostsCtrl">
<input type="hidden" name="brandid" value="{{post.brandid}}"/>
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" value="{{post.name}}" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-checked="post.isactive" name="isactive" value="1"/>
</div>
</div>
<div class="form-actions">
<tags:label text="close"/>
<button type="submit" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var brandId = getParameterByName('brandid');
var app = angular.module('myApp', [])
.controller("PostsCtrl", function($scope, $http) {
$http.get('http://localhost/admin.brands/getJsonBrandAndEdit?brandid=' + brandId).
success(function(data, status, headers, config) {
$scope.post = data;
}).
error(function(data, status, headers, config) {
});
});
</script>
How can I make it work ? What is the problem ?

Resources