trim trim - 29 days ago 11
AngularJS Question

Angular ng-repeat not working with $http.post

I've tried a long time to solve my problem. The problem is after fetching data by post method my HTML content is not updating. My pages are being changed by

$routeProvider
and the codes is as follows:

socialGroup.config(function($routeProvider) {
$routeProvider.when('/my-groups', {
templateUrl: 'my-groups.html'
}).otherwise({ templateUrl: 'dashboard.html' });
});


View



<script type="text/ng-template" id="my-groups.html">
<div data-ng-controller="myGroups" class="form">
<div class="row">
<div class="col-md-12 col-sm-12"><h1>My Groups</h1></div>
</div>
<br/>
<div class="col-md-12 col-sm-12">
<table class="table table-hover table-inverse">
<thead>
<tr class="success">
<th>SN</th>
<th><i class="fa fa-users" aria-hidden="true"></i>Group Name</th>
<th><i class="fa fa-wrench" aria-hidden="true"></i>Action</th>
<th><i class="fa fa-sun-o" aria-hidden="true"></i>Status</th>
</tr>
</thead>

<tbody>
<div class="row" data-ng-repeat="group in groups">
<tr class="info">
<th scope="row">{{group.id}}</th>
<td>
<a href="#/stays-group/{{group.token}}" class="text-info" title="View {{group.name}} posts.">
<b>{{group.name}}</b>
</a>
</td>
<td>
<a href="{{group.link}}" title="{{group.label}}">
<b>{{group.label}}</b>
</a>
</td>
<td title="Group is active">
<label data-ng-show="group.active" class="text-success" ><b>Active</b></label>
<label data-ng-hide="group.active" class="text-danger" ><b>Inactive</b></label>
</td>
</tr>
</div>
</tbody>
</table>
</div>
</div>
</script>


Controller



socialGroup.controller('myGroups', function($scope, $http) {
$scope.groups = [];
$http({
method: "post",
url: 'my-groups-link',
data: $.param({ token:sha1( Math.random() ) }),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function success(response) {
$scope.groups = response.data;
//$scope.$apply();
//$scope.$applyAsync();
console.log($scope.groups);
}, function error(response) {});
});


I observed my console and showed the data had come from the server but the data is not updating to view.

Any suggestion will be appreciated.

Answer

Not sure if this is the problem but you can't have a <div> in <tr>

Just loop over your data by using ng-repeat on <tr>

<tbody>
    <tr class="info" data-ng-repeat="group in groups">