I am working on a employee attendance system where i need to know their attendance status.I am generating a dynamic form which contains a text input field and a checkbox for each employee using angularjs ng-repeat inside a table to know whether the the employee was present or absent along with comments.I want to save the values of these dynamic text filed and checkbox using a single save button.Text fields may have null values or any other values and checkbox may be all checked,all unchecked and few checked and few unchecked. If the check box is checked then i want to save "checked":"yes" otherwise as no.I have also a single date input field to save the record for this particular date.
I think the solution of my situation is forming a dynamic array from inputs and assign it to a variable but and don't know how to form array dynamically in angularjs and then pass the array to a php page.Can you help me on this issue?
My expected array format is :
[{"Did":"10","supervisor":"ms1001","date":"2017-06-01", "info": {"eid":"10","checked":"yes","cmnt":"on time"}, {"eid":"20","checked":"NO", "cmnt":"absent"}, {"eid":"30","checked":"yes","cmnt":""}, {"eid":"40","checked":"NO","cmnt":"OK"}, {"eid":"50","checked":"YES","cmnt":""}, {"eid":"60","checked":"YES","cmnt":""}, {"eid":"70","checked":"YES","cmnt":""}, {"eid":"80","checked":"NO","cmnt":"Late"}, {"eid":"90","checked":"YES","cmnt":""} }]; I will store the input details in attendance table which schema is attendance(did,eid,date,checked,comment,supervisor_id)
var myApp = angular.module('myApp',['ui.bootstrap']); myApp.controller('MyCtrl', function($scope) { $scope.list = [ {"dept_id":"d10","dname":"sales","supervisor":"ms1001"}, {"eid":"10","ename":"nam1"}, {"eid":"20","ename":"nam2"}, {"eid":"30","ename":"nam3"}, {"eid":"40","ename":"nam4"}, {"eid":"50","ename":"nam5"}, {"eid":"60","ename":"nam6"}, {"eid":"70","ename":"nam7"}, {"eid":"80","ename":"nam8"}, {"eid":"90","ename":"nam9"}, {"eid":"120","ename":"nam10"} ]; $scope.did= $scope.list[0].dept_id; $scope.dname= $scope.list[0].dname; $scope.sp_name= $scope.list[0].supervisor; $scope.selectedText = 'Select All'; $scope.isAll = false; $scope.selectAll = function() { if($scope.isAll === false) { angular.forEach($scope.list, function(data){ data.checked = true; }); $scope.isAll = true; $scope.selectedText = 'Deselect All'; } else { angular.forEach($scope.list, function(data){ data.checked = false; }); $scope.isAll = false; $scope.selectedText = 'Select All'; } }; $scope.selectedFriends = function () { return $filter('filter')($scope.list, {checked: true }); }; //date picker $scope.open = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.opened = true; }; $scope.dateOptions = { formatYear: 'yy', startingDay: 1 }; $scope.format = 'dd-MMMM-yyyy'; //end of date picker }); <html> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.angularjs.org/1.6.1/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style> .full button span { background-color: limegreen; border-radius: 32px; color: black; } .partially button span { background-color: orange; border-radius: 32px; color: black; } </style> </head> <div class="container"> <div ng-app="myApp" ng-controller="MyCtrl"> <div class="row"> <div class="col-sm-3" style="background-color:yellow;"> <p>Department ID::{{did}}</p> </div> <div class="col-sm-3" style="background-color:skyblue;"> <p>Dept Name:{{dname}}</p> </div> <div class="col-sm-3" style="background-color:pink;"> <p>Supervisor name name:{{sp_name}}</p> </div> <div class="col-sm-3"> <p class="input-group"> <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="list.dt" is-open="opened" min-date="minDate" max-date="'2018-06-22'" ng-model-options="{timezone: 'UTC'}" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open($event)"> <i class="glyphicon glyphicon-calendar"></i></button> </span> </p> </div> </div> <table class="table table-striped table-bordered"> <thead> <tr> <th>Employee ID</th> <th>name</th> <th><label>Attendence</label><br><span id="selectall" ng-click="selectAll()"><input type="checkbox">{{selectedText}}</span></th> <th>comment</th> </tr> </thead> <tbody> <tr ng-repeat="data in list" ng-if="$index"> <td> {{ data.eid }} </td> <td> {{ data.ename }} </td> <td> <input type="checkbox" value="{{ data.eid}}" ng-checked="data.checked" ng-model="data.checked"></td> <td> <input type="text" ng-model="data.cmnt" ></td> </tr> </tbody> </table> <pre>{{list}}</pre> </div> <button type="button" ng-click="saveAll()">Save all</button> </div> </html>
