HTML Table data not being displayed when used ng-repeat

Question

I am writing a simple Flask web app, I am trying to display a simple table data on my html page with angular js , I am using ng-repeat to loop through the data , but it is not working for unknown reason , when I check on the console it does not show any error. Please help!

This is my HTML code

<tbody>     
  <!-- {% for user in User %}-->
  <tr ng-repeat="user in User">
    <td> // user.uid // </td>
    <td >// user.taskname // 
      <input type="image" class="deleteImg" src="static/img/trash_can.png" height="15px" width="18px" name="removeId" value="{{user.uid}}" > 
      <input type="image" value="{{user.uid}}" src="static/img/editbtn.svg" height="15px" width="18px" name="editId">   
    </td>
  </tr>
  <!-- {% endfor %} -->
</tbody>

This is my angular code

<script>   
  var app = angular.module("app", []);
  app.controller('myctrl', function($scope) {
    $scope.myname="Howdy"; 
    $scope.transfer= function(user) {
      $scope.maintxt="kkk";
    };   
  });
  app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('//').endSymbol('//');
  });
</script>

What's inside User? It doesn't seem to be in your controller. — koralarts
– koralarts, Commented Jun 28, 2017 at 21:43
@Koralarts that is User model class. I am using Flask Python framework. — Prasanna
– Prasanna, Commented Jun 28, 2017 at 21:48
That's why ng-repeat isn't working, it's trying to loop through a variable that doesn't exist in the Angular scope. Either you pass in User to Angular via Javascript manually (not recommended) or calling an API which returns your list of users. — koralarts
– koralarts, Commented Jun 28, 2017 at 21:53
@Koralarts Ok , How can I do any one of it? can you please give me an idea or a link of quick tutorial I can follow. — Prasanna
– Prasanna, Commented Jun 28, 2017 at 22:00

koralarts · Accepted Answer · 2017-06-28 22:16:42Z

1

Flask Restful API: https://blog.miguelgrinberg.com/post/designing-a-restful-api-with-python-and-flask

AngularJS Consuming a Restful API: https://spring.io/guides/gs/consuming-rest-angularjs/

Flask:

@app.route(path, methods=['GET'])
def get_User():
  get list of user
  if list of user is empty 
    return 404
  return list of user as JSON

AngularJS:

controller $scope, $http
  $scope.User = []
  $http.get(APIEndPoint)
    .then((response) => {
      $scope.User = response.User
    })

HTML:

<tr ng-repeat="user in User">
  process user here
</tr>

edited Jun 28, 2017 at 22:16

answered Jun 28, 2017 at 22:11

koralarts

2,1125 gold badges30 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

HTML Table data not being displayed when used ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related