I am generating dynamic input fields using angularjs ng-repeat inside a table where each row contains a text field and checkbox.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.Now i want to form an array from the dynamic inputs in angular js then pass it to a php page and process there.My expected array format is :
[{"Did":"10","dname":"sales","date":"2017-06-01",
"info":
{"eid":"10","name":"nam1","checked":"yes","cmnt":"on time"},
{"eid":"20","name":"nam2","checked":"NO", "cmnt":"absent"},
{"eid":"30","name":"nam3","checked":"yes","cmnt":""},
{"eid":"40","name":"nam4","checked":"NO","cmnt":"OK"},
{"eid":"50","name":"nam5","checked":"YES","cmnt":""},
{"eid":"60","name":"nam6","checked":"YES","cmnt":""},
{"eid":"70","name":"nam7","checked":"YES","cmnt":""},
{"eid":"80","name":"nam8","checked":"NO","cmnt":"Late"},
{"eid":"90","name":"nam9","checked":"YES","cmnt":""}
}];
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="http://ift.tt/2pj6mAc" rel="stylesheet">
<script src="http://ift.tt/20g0BuL"></script>
<script src="http://ift.tt/2jSmNwf"></script>
<script src="http://ift.tt/2qGIbrj"></script>
<script src="http://ift.tt/2rbKFB9"></script>
<script src="http://ift.tt/2qGN7Mt"></script>
<link rel="stylesheet" href="http://ift.tt/1RrshYi">
<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::</p>
</div>
<div class="col-sm-3" style="background-color:skyblue;">
<p>Dept Name:</p>
</div>
<div class="col-sm-3" style="background-color:pink;">
<p>Supervisor name name:</p>
</div>
<div class="col-sm-3">
<p class="input-group">
<input type="text" " class="form-control" uib-datepicker-popup=""
ng-model="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"></span></th>
<th>comment</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list" ng-if="$index">
<td> </td>
<td> </td>
<td> <input type="checkbox" value="" ng-checked="data.checked" ng-model="data.checked"></td>
<td>
<input type="text" ng-model="data.cmnt" ></td>
</tr>
</tbody>
</table>
</div>
<button type="button" ng-click="saveAll()">Save all</button>
</div>
</html>
Aucun commentaire:
Enregistrer un commentaire