Javascript 角度：ng在视图中重复计算数据

我正在写一个有棱角的网站，但我有以下问题。我有两个从json文件中获取的数据数组

我在html文件中使用ng repeat检查我的项目，并使用另一个ng repeat检查我的projects.languages。 现在我想做的是让我找到的每种语言都能在语言数据中搜索 并获取其他信息

我怎样才能轻松获得ng repeat中的语言，我还需要计算，因为数据可能还不可用， 因为我异步获取json数据。

这是我现在掌握的代码：

languages.json

projects.json

简易件：

首先，不要使用$q，只使用$http

app.service('projectService', ['$http', '$filter', function($http, $filter) {
  function callLanguages(languages) {
    return $http({
      method: 'GET',
      url: 'json/projects.json',
      cache: true
    }).then(function (response) {
      return buildProjectWithLanguages(response.data.projects, languages);
    });
  }

  function buildProjectWithLanguages (projects, languages) {
    return projects.map(function (p) {
      var langs = p.languages.map(function (l) {
        var matchLangs = $filter('filter')(languages, { name: l });
        if (matchLangs.length) {
          return matchLangs[0];
        } else {
          return { FullName: l };
        }
      });
      p.languages = langs;
      return p;
    });
  }

  this.getProjects = function(){
    return $http({
      method: 'GET',
      url: 'json/languages.json',
      cache: true
    }).then(function(response) {
      return callLanguages(response.data.languages);
    });
  };
}]);

然后简化控制器

app.controller('ProjectsController', ['$scope', 'projectService', function($scope, projectService) {
  $scope.projects = [];
  projectService.getProjects(function (projects) {
    $scope.projects = projects;
  });
}]);

最后将您的html更改为：

<div class="container-fluid contentcontainer">
  <div class="row">
    <div class="col-xs-6 col-md-3" ng-repeat="project in projects">
      <a href="#/project/{{$index}}" class="thumbnail">
        <img ng-src="{{project.img}}" ng-alt="{{project.name}}" />
        <div class="caption">
          <div class="languageoverlay">
            <span ng-repeat="language in project.languages">
               <img ng-src="{{language.img}}" ng-alt="{{language.FullName}}" />
               <font ng-show="!$last">+</font> 
            </span>
          </div>
          <h3>{{project.name}}</h3>
        </div>
      </a>
    </div>
  </div>
</div>

简易件：

首先，不要使用$q，只使用$http

app.service('projectService', ['$http', '$filter', function($http, $filter) {
  function callLanguages(languages) {
    return $http({
      method: 'GET',
      url: 'json/projects.json',
      cache: true
    }).then(function (response) {
      return buildProjectWithLanguages(response.data.projects, languages);
    });
  }

  function buildProjectWithLanguages (projects, languages) {
    return projects.map(function (p) {
      var langs = p.languages.map(function (l) {
        var matchLangs = $filter('filter')(languages, { name: l });
        if (matchLangs.length) {
          return matchLangs[0];
        } else {
          return { FullName: l };
        }
      });
      p.languages = langs;
      return p;
    });
  }

  this.getProjects = function(){
    return $http({
      method: 'GET',
      url: 'json/languages.json',
      cache: true
    }).then(function(response) {
      return callLanguages(response.data.languages);
    });
  };
}]);

然后简化控制器

app.controller('ProjectsController', ['$scope', 'projectService', function($scope, projectService) {
  $scope.projects = [];
  projectService.getProjects(function (projects) {
    $scope.projects = projects;
  });
}]);

最后将您的html更改为：

<div class="container-fluid contentcontainer">
  <div class="row">
    <div class="col-xs-6 col-md-3" ng-repeat="project in projects">
      <a href="#/project/{{$index}}" class="thumbnail">
        <img ng-src="{{project.img}}" ng-alt="{{project.name}}" />
        <div class="caption">
          <div class="languageoverlay">
            <span ng-repeat="language in project.languages">
               <img ng-src="{{language.img}}" ng-alt="{{language.FullName}}" />
               <font ng-show="!$last">+</font> 
            </span>
          </div>
          <h3>{{project.name}}</h3>
        </div>
      </a>
    </div>
  </div>
</div>

---

我真的很喜欢你的awnser，但我用指令做了另一种方法。我测试了你的awnser，它看起来像一个正确的awnser

这就是我所做的：

projects-directive.html

如何调用指令：

<projects></projects>

如果要限制它，可以添加参数：

<projects limitto="projectlimit"></projects>

---

我真的很喜欢你的awnser，但我用指令做了另一种方法。我测试了你的awnser，它看起来像一个正确的awnser

这就是我所做的：

projects-directive.html

如何调用指令：

<projects></projects>

如果要限制它，可以添加参数：

<projects limitto="projectlimit"></projects>

试试这个。供参考：我不喜欢数据库数据如何污染作用域。试试这个。仅供参考：我不喜欢如何用数据库数据污染作用域。我对awnser有一个问题，出于某种原因，它无法运行（projects）{$scope.projects=projects；}，但实际上调用了其余代码。我打了回击p；每个项目的断点，其中包含正确的数据。我对awnser有一个问题，出于某种原因，它无法运行（projects）{$scope.projects=projects；}，但实际上调用了其余的代码。我打了回击p；包含正确数据的每个项目的断点。

<projects></projects>

<projects limitto="projectlimit"></projects>