How to pass different values of input fields (text, date, selection) to a method in angular
I have different input field values, I need to pass all the field values to the method applyLeave()
.
I tried this by initializing the array as $scope.value=[]
in init () method, but I got nothing. So I removed this code.
Any suggestion?
<body ng-app="intranet_App" ng-controller="myCtrl" ng-init="init()">
<div>
<label>Leave Type</label>
<select type="text" id="levType" ng-model="selectedvalue" ng-blur="leaveBalance(selectedvalue)"><option value="" selected="selected">Select</option><option data-ng-repeat="data in leaveTypes" value="{{data.id}}">{{data.Name}}</option></select>
</div>
<div>
<label>Balance</label>
<input type="text" id="levTaken" readonly="readonly" ng-model="noOfLevs[0].balance_count">
</div>
<div>
<label>From Date</label>
<input type="date" id="levFrom">
</div>
<div>
<label>To Date</label>
<input type="date" id="levTo" ng-blur="calculateDays()">
</div>
<div>
<label>Duration(Days)</label>
<input type="text" id="levDuration" readonly="readonly">
</div>
<div>
<label>Supporting Document</label>
<input type="file" id="uploadDoc">
</div>
<div>
<label>Comments</label>
<textarea id="LevReason" rows="2"></textarea>
</div>
<div class="row pull-right btnMarginTop">
<button class="btn btn-primary btnMarRight" ng-click="applyLeave(),">Apply</button>
</div>
</body>
<script>
var app = angular
.module("intranet_App", [])
.controller("myCtrl", function ($scope, $http) {
$scope.init = function () {
$scope.value= [];
$http.post("/leave/getLeaveTypeList").then(function (response) {
$scope.leaveTypes = response.data;
})
}
$scope.applyLeave = function () {
console.log()
}
})
</script>
source to share
You can / should wrap your form with a tag <form name="yourName">
or <ng-form name="yourName">
. As the other answer says, you should look into angular forms. https://docs.angularjs.org/guide/forms
Linking your data to ng-model will help your case a lot too. I created a jsfiddle with some minor changes (and maybe simplifications).
I poked fun at your request for data, so the dropdown works. When you click the button, it will be console.log
data from the model.
http://jsfiddle.net/1c8zudve/2/ (updated)
<body ng-app="myApp" ng-controller="myCtrl" ng-init="init()">
<div>
<label>Leave Type</label>
<select type="text" id="levType" name="leaveType" ng-model="leave.leaveType" ng-blur="leaveBalance(leave.leaveType)">
<option value="" selected="selected">Select</option>
<option data-ng-repeat="data in leaveTypes" value="{{data.id}}">{{data.Name}}</option>
</select>
</div>
<div>
<label>Balance</label>
<input type="text" id="levTaken" readonly="readonly" ng-model="leave.balance">
</div>
<div>
<label>From Date</label>
<input type="date" id="levFrom" name="fromDate" ng-model="leave.fromDate">
</div>
<div>
<label>To Date</label>
<input type="date" id="levTo" name="toDate" ng-model="leave.toDate">
</div>
<div>
<label>Duration(Days)</label>
<input type="text" id="levDuration" readonly="readonly" ng-model="leave.duration">
</div>
<div>
<label>Supporting Document</label>
<input type="file" id="uploadDoc" ng-model="leave.document">
<!-- ^ this will requiring some more code to make it work as expected -->
</div>
<div>
<label>Comments</label>
<textarea id="LevReason" rows="2" ng-model="leave.reason"></textarea>
</div>
<div class="row pull-right btnMarginTop">
<button class="btn btn-primary btnMarRight" ng-click="applyLeave()">Apply</button>
</div>
</body>
and the modified script
var app = angular.module("myApp", [])
.controller("myCtrl", function($scope, $http) {
$scope.init = function() {
$scope.leave = {
balance: 120,
duration: 25
};
$scope.value = [];
$http.post("/leave/getLeaveTypeList").then(function(response) {
$scope.leaveTypes = [{
Name: "test 1",
id: 1
}, {
Name: "test 2",
id: 2
}]
//$scope.leaveTypes = response.data;
})
}
$scope.applyLeave = function() {
console.log($scope.leave)
}
})
source to share