forming an array from dynamic input fileds using angularjs

Question

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>

but what is the question? to write all the logic for you starting from the frontend and ending to the store in the db? — quirimmo
– quirimmo, Commented May 31, 2017 at 21:52
i just want to form an array of all those inputs than catch it from a php page.so the question is how could i form the array in angular js and how to access those variable in php and for the rest i know how to process it in php page! — query
– query, Commented Jun 1, 2017 at 13:53
yes i want to save this in mysql and i know how to do it.But just facing problem in creating the array in angularjs and read it from a php page @VK321 — query
– query, Commented Jun 1, 2017 at 14:11
@query - I asked you as the way you are doing is not correct. You may want to optimize logic as well. — VK321
– VK321, Commented Jun 1, 2017 at 14:29

VK321 · Accepted Answer · 2017-06-02 09:02:40Z

1

HTML

<table border="1">
 <tr>
    <td>Employee ID</td>
    <td>Name</td>
    <td>Attendance</td>
 </tr>
 <tr ng-repeat="employee in employees">
    <td>{{employee.eid}}</td>
    <td>{{employee.ename}}</td>
    <td><input type="checkbox" name="check" ng-model="employee.att">
 </td>
 </tr>
</table>

<button ng-click="saveForm()">Save all</button>
<pre>{{employees}}</pre>

JS

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope, $http) {

//initial data to display on table.
$scope.employees = [
 {eid:"10",ename:"nam1", att: false},
 {eid:"20",ename:"nam2", att: false},
 {eid:"30",ename:"nam3", att: false},
];

//on save
$scope.saveForm = function (){

  $http({
    method: 'POST',
    url: '/ana/testone',
    data: $.param({formData: angular.copy($scope.employees)}),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  }).then(function(response) {
    console.log(response);
  });
}
});

PHP

$data = $_POST['formData'];
echo json_encode($data);

answered Jun 2, 2017 at 9:02

VK321

6,0135 gold badges48 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

query Over a year ago

i think we are almost close to the solution except one problem. If you look to my code snippet you will see that there is a date picker out of the table.I need the the value of that date picker to be send within the same array.any idea how to achieve ?

query Over a year ago

not working as date picker is out side of the ng-repeat!

VK321 Over a year ago

@query - <input type="text" class="form-control" ng-model="employees.mydate" .......

query Over a year ago

@VK321- still no effect!the date is not showing inside <pre></pre> tag. i have updated my code snippet kindly check it

VK321 Over a year ago

@query - stackoverflow.com/questions/19316937/…

|

Collectives™ on Stack Overflow

forming an array from dynamic input fileds using angularjs

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related