How to pass different input field(text,date,select) values into a method in angularjs

Question

I am having different input field values, I need to pass all field values into applyLeave() method.
I tried this by initializing an array like $scope.value=[] in init() method,But am getting nothing.So I removed that 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>

Answer 1

You could/should wrap your form with a <form name="yourName"> or <ng-form name="yourName"> tag. As the other answer states, you should look into building angular forms. https://docs.angularjs.org/guide/forms

Binding your data to ng-model will also greatly help your cause. I have created a jsfiddle with some minor changes (and possibly simplifications).

I mocked your data call so the dropdown works. When you click the button, it will console.log the 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)
                }
              })