javascript - Angular : ng-repeat calculate data in view

Question

我正在编写一个 Angular 网站，但遇到以下问题。我有 2 个从 json 文件中获取的数据数组。

我使用 ng-repeat 来检查我的 html 文件中的项目，并使用另一个 ng-repeat 来检查我的项目.语言。 现在我想做的是，对于我找到的每种语言，我将在语言数据中进行搜索 并获取其他信息。

如何轻松获取 ng-repeat 中的语言，我还需要计算数据可能尚不可用， 因为我异步获取了 json 数据。

这是我现在拥有的代码:

<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 projects[$index].languages">
               <img ng-src="img/languages/android.png" ng-alt="{{language}}" />
               <font ng-show="!$last">+</font> 
            </span>
          </div>
          <h3>{{project.name}}</h3>
        </div>
      </a>
    </div>
  </div>
</div>
<!--this is just to try, don't need to use this-->
<h1>{{getLanguage("CSharp")}}</h1>

App.js

app.service('projectService', ['$http', '$q', function($http, $q) {
  var projectsDeferred = $q.defer();
  var languagesDeferred = $q.defer();

  $http({
    method: 'POST',
    url: 'json/projects.json',
    cache: true
  }).then(function(data) {
      projectsDeferred.resolve(data.data.projects);
  });

  $http({
    method: 'POST',
    url: 'json/projects.json',
    cache: true
  }).then(function(data) {
      languagesDeferred.resolve(data.data.languages);
  });

  this.getProjects = function(){
    return projectsDeferred.promise;
  };

  this.getLanguages = function(){
    return languagesDeferred.promise;
  };
}]);

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

  var promise = projectService.getProjects();
  promise.then(function(data) {
      $scope.projects = data;
  });
  var promise = projectService.getLanguages();
  promise.then(function(data) {
      $scope.languages = data;
  });

  // This was a try, don't need to use this
  $scope.getLanguage = function(name) {
    array.forEach(function(element) {
      if (element.name == name) {
        $scope.push(element);
      }
    }, $scope.languages);
  };
}]);

语言.json

{
   "result":"SUCCESS",
   "resultMessage":"",
   "languages":[
      {
         "name":"CSharp",
         "FullName":"C#",
         "img":"img/languages/csharp.png"
      },
      {
         "name":"Android",
         "FullName":"Android",
         "img":"img/languages/android.png"
      },
      {
         "name":"VisualStudio",
         "FullName":"Visual Studio",
         "img":"img/languages/visualstudio.png"
      }
   ]
}

projects.json

{
   "result":"SUCCESS",
   "resultMessage":"",
   "projects":[
      {
         "name":"Test1",
         "img":"img/projects/photo-1453060113865-968cea1ad53a.jpg",
         "languages":["Android"]
      },
      {
         "name":"Test2",
         "img":"img/projects/photo-1454165205744-3b78555e5572.jpg",
         "languages":["Android"]
      },
      {
         "name":"Test3",
         "img":"img/projects/photo-1457305237443-44c3d5a30b89.jpg",
         "languages":["CSharp","VisualStudio"]
      },
      {
         "name":"Test4",
         "img":"img/projects/photo-1457612928689-a1ab27da0dad.jpg",
         "languages":["CSharp","VisualStudio"]
      }
   ]
} 

Answer 1

简单的部分:

首先不要使用 $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);
    });
  };
}]);

然后简化你的 Controller

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>