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

【问题标题】：how to return database result through angular method如何通过角度方法返回数据库结果
【发布时间】：2017-08-24 16:20:47
【问题描述】：

我想知道是否可以通过 ngRepeat 模板中的角度方法调用返回数据库结果。为了澄清这里是我的模板：

<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>

这是我的控制器，在我的控制器中，我有一个方法可以接受 ngRepeat 中结果的每个 id 值，以从数据库中获取 cmets 的数量

$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);
    });
}

此脚本使我的浏览器在进入循环时冻结。任何帮助将不胜感激。

【问题讨论】：

如果我理解正确，您正在尝试收集新闻，那么对于每条新闻您想获取模板中的 cmets 数量？为什么？您应该在控制器中执行此操作，或者更好 - 准备端点以通过一个请求获取所需信息，而不是每次获取请求时都发送。
还有一件事，你为什么使用$http.post 来处理get 请求？
你能用代码 sn-p @tommybernaciak 解释一下“在你的控制器中做”是什么意思吗
对不起，应该解释得更好。我的意思是在控制器中获取数据，例如通过在初始化时调用get 方法，然后在模板中使用ng-repeat 显示响应。不要在ng-repeat 中调用get。第一个优点是您只需使用一次 API 调用即可获得所有数据，如果您有 100 个news，您最终将收到 100 个不必要的 API 调用，这可能会使您的应用程序非常慢。其次，http 请求是异步调用，在模板中使用它可能会给你带来奇怪的结果。

标签： javascript php angularjs

【解决方案1】：

它可能会循环，因为每个摘要循环都会重新调用以获取信息。你最好有一个变量，每个项目都被填充，并在每个元素上调用类似 ng-init 的东西，它只会被调用一次来初始化你的项目变量。这有意义吗？

例如

    <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);
    });
}

【讨论】：

当然，你解释的一般想法对我来说确实有意义@Jaie，我尝试进行相应的修改，但浏览器仍在循环中运行。有没有其他方法可以达到一些效果？

【解决方案2】：

解决方法很简单，使用get调用控制器init来获取所有cmets数据。然后在这个集合上使用 ng-repeat 迭代并只显示你想要的那些数据以获得正确的新闻 id。如果你只想要一些 cmets，这里是例子，它没有经过测试，但你应该明白。它要求您准备 API 端点以返回所有 cmets。

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>

【讨论】：

非常感谢@tommybernaciak 我已经能够通过你的脚本弄清楚了。