Anuj Mayank Anuj Mayank - 2 months ago 7
AngularJS Question

How to read data from a table and form an array and post it?

I want to get data and display it on a table then modify the "availability" and again post it to the server by forming an array of object. Right now the way I am doing it I am able to get the data but it is not coming with modification .

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>


<body ng-app="valueExample" ng-controller="ExampleController">
<script>
angular.module('valueExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.routeDetails =
[
{
"Employee":"Employee 1",
"date":"2016-09-25",
"availablity":"Yes"
},
{
"Employee":"Employee 2",
"date":"2016-09-25",
"availablity":"No"
},
{
"Employee":"Employee 3",
"date":"2016-09-25",
"availablity":"Yes"
},
{
"Employee":"Employee 4",
"date":"2016-09-25",
"availablity":"No"
}
]
$scope.submit = function(data) {
console.log(data);
};
}]);
</script>
<form>
<table class="table_role" >
<thead>
<tr><th>Employee Name</th>
<!-- <th>Date</th> -->
<th>Availablity</th>
</tr>
</thead>
<tbody ng-repeat="routeDetail in routeDetails | orderBy">
<tr>
<td>{{routeDetail.Employee}}</td>

<!-- <td>{{routeDetail.date}}</td> -->

<td>
<input type="checkbox" ng-checked="routeDetail.availablity == 'Yes'" />
</td>
</tr>
</tbody>
</table>
<button ng-click="submit(routeDetails)" type="submit">Submit</button>
</form>
</body>


</html>

Answer

Change your checkbox logic like this

<td>
    <input type="checkbox" ng-model="routeDetail.availablity"
                   ng-true-value="'Yes'" ng-false-value="'No'"/>
</td>

It should work.

Comments