I have an Html page in an angularjs based application, I want to extract the data from the page(for example, from-date and to-date) and then pass this data into the controller. I want to pass it within a single object.
eg:
<button ng-click="myControllerFunc(myObject)" />
How to create this myobject and pass it to the myControlerFunc?
in case you are using ng-repeat on an object u could directly send in your object with the function call, eg:-
<div ng-repeat="item in items">
<button data-ng-click="callFunction(item)">call my object</button>
</div>
....
in your controller you can read it in your function
$scope.callFunction = function(item){
console.log(item);
};
Hence you get the complete data . Cheers!
If the data is in scope and then you want to populate myObject on the click of the button, you can do something like this in the controller:
$scope.myControllerFunc =function(myObject) {
myObject.fromDate = $scope.fromDate;
myObject.toDate = $scope.toDate;
}
If from an html element you want the data then you can make use of angular.element and do something like this:
$scope.myControllerFunc =function(myObject) {
var fromDate = angular.element( document.querySelector( '#fromDate' ) );
var toDate= angular.element( document.querySelector( '#toDate' ) );
myObject.fromDate = fromDate.val();
myObject.toDate = toDate.val();
}
I think you have a slight misunderstanding of how angular works. Your page would look like this with your to and from date inside the controller like below.
<div data-ng-controller="searchBar" data-ng-init="id='g3_v1'" class="widget">
<form data-ng-submit="formSubmit()">
From date: <input data-ng-model="fromDate" type="text" ><br/>
To date: <input data-ng-model="toDate" type="text" ><br/>
<button ng-click="formSubmit()" />
</form>
</div>
The controller code as following:
$scope.formSubmit = function() {
var data = {"toDate":$scope.toDate,
"fromDate": $scope.fromDate};
$http({
url: "json/search",
method: "GET",
params: data
}).then(
function(resp)
{
//success callback
},
function(error)
{
//failure callback
});
};
In case the toDate and fromDate are out of your control, you can use service to set the same variables inside a controller.
You can define the object (in your example, we're talking about myObject) ahead of time in your controller on the $scope object, and simply use ng-model to bind the fields to the properties on the object. You do not have to define the object ahead of time, though. ngModel will create the object for you when binding, if it can.
<form name="frm" ng-submit="myControllerFunc(myObject)">
From date:
<input type="date" ng-model="myObject.fromDate" />
<br />To date:
<input type="date" ng-model="myObject.toDate" />
<br />
<button type="submit">Submit</button>
<small>Check console log for value upon submit</small>
</form>
For the function, define it on the $scope object in your controller. In this example, passing in the object is superfluous as you can just reference it on $scope rather than an argument, but you may have your reasons.
$scope.myControllerFunc = function(obj) {
console.log(obj); // do whatever you want with obj
};
Demo.
For the sake of completeness, here's the body of the controller if you define things ahead of time.
$scope.myObject = { fromDate: null, toDate: null };
$scope.myControllerFunc = function() {
console.log($scope.myObject); // do whatever you want with obj
};
The view would not be any different except you can remove the parameter from ng-submit:
<form name="frm" ng-submit="myControllerFunc()">
Mix and match according to your needs.
Also, you do not have to use ng-submit to call the function as shown in my examples (I didn't see your edit that included this detail). You can just call myControllerFunc from your button ng-click in the same way I've used it in ng-submit.
