如何通过角度方法返回数据库结果

Question

I want to know if its possible to return database result through angular method call within an ngRepeat template. To clarify here is my template:

<div class="article-right" ng-repeat="localNews in allLocalNews | limitTo:5">
  <div class="article-title">
    <p>
      On {{localNews.dte | date}} 
      <a>Number of comment: {{getNumberOfComment(localNews.id)}} </a>
    </p>
  </div>

and here is my controller, Within my controller I have a method which accepts each id value of results in ngRepeat to fetch the number of comments from the database

$scope.getNumberOfComment = function(id){ 
  var cObj = {id:id};   //get a news number of comments   
  return $http.post("shared/search/getNumberOfComment.cln.php",cObj).success(function(response){
        if(response != "failed"){
            return response;
        }
    }).error(function (response, status) {
        console.log(response);
    });
}

This scripts makes my browser to freeze as it goes into loop. Any help will be highly appreciated.

Answer 1

It probably loops because each digest cycle it will remake the calls to get the info. You better off having a variable that gets populated per item and calling something like ng-init on each element which will only get called once to initialise you item variable. Does that make sense?

eg

    <div class="article-right" ng-repeat="localNews in allLocalNews | limitTo:5">
      <div class="article-title">
        <p>
          On {{localNews.dte | date}} 
          <a ng-init=getNumberOfComment(localNews.id, localNews)>Number of comment: {{localNews.myVar}} </a>
        </p>
      </div>

  $scope.getNumberOfComment = function(id, localNews){ 
  var cObj = {id:id};   //get a news number of comments   
  return $http.post("shared/search/getNumberOfComment.cln.php",cObj).success(function(response){
        if(response === "passed"){
            localNews.myVar = response;
        }
    }).error(function (response, status) {
        console.log(response);
    });
}

Answer 2

The solution is simple, use get call on controller init to get all comments data. Then using ng-repeat iterate on this collection and show only those data you want for a proper news id. If you want only a number of comments, here is the example, it is not tested but you should get the idea. It requires from you to prepare API endpoint to return all the comments.

function CommentsController() {
  var vm = this;
  vm.comments = [];
  getComments();

  function getComments() {
    $http.get("your/api/getComments.cln.php").success(function(r){
      vm.comments = r;
    }
  }

  function getNumberOfComment(newsId) {
    return vm.comments.filter(function(comment){
      return comment.news_id === newsId;
    }).length;
  }
}


<div class="article-right" ng-repeat="localNews in allLocalNews | limitTo:5">
  <div class="article-title">
    <p>
     On {{localNews.dte | date}} 
    <a>Number of comment: {{$ctrl.getNumberOfComment(localNews.id)}} </a>
  </p>
</div>