Question

我正在写一个有角度的网站，但我有以下问题。我从我的json文件中获得了2个数据数组。

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

如何在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);
  };
}]);

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

然后简化您的控制器

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>

Answer 2

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

这就是我所做的：

项目-directive.html

<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">
          <languages languagenames="project.languages"></languages>
          <h3>{{project.name}}</h3>
      </div>
    </a>
  </div>
</div>

语言-directive.html

 <div class="languageoverlay">
    <span ng-repeat="language in languages">
        <img ng-src="{{language.img}}" ng-alt="{{language.FullName}}" />
        <font ng-show="!$last">+</font> 
    </span>
</div>

app.js

app.service('projectService', ['$http', '$filter', function($http, $filter) {
  this.getLanguages = function() {
    return $http({
      method: 'GET',
      url: 'json/languages.json',
      cache: true
    });
  }

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

app.directive('projects', ['projectService', function(projectService) {  
  return {
     restrict: 'E',
     templateUrl:  "directives/projects-directive.html",
     scope: {
        limitto: "=?"
     },
     controller: function($scope)
     {
       projectService.getProjects().then(function(response) {
         projects = response.data.projects;
         if (angular.isDefined($scope.limitto))
         {
           $scope.projects = projects.slice(0, $scope.limitto);
         } else {
           $scope.projects = projects;
         }
       });
     }
  }
}]);

app.directive('languages', ['projectService', '$filter', function(projectService, $filter) {
  return {
     restrict: 'E',
     templateUrl:  "directives/languages-directive.html",
     scope: {
        languagenames: "="
     },
     controller: function($scope)
     {
       projectService.getLanguages().then(function(response) {         
         $scope.languages = $scope.languagenames.map(function (l) {
          var matchLangs = $filter('filter')(response.data.languages, { name: l });
          if (matchLangs.length) {
            return matchLangs[0];
          } else {
            return { FullName: l };
          }
        });
       });
     }
  }
}]);

app.controller('PortfolioController', ['$scope', 'projectService', function($scope, projectService) {
  $scope.projectlimit = 4;
}]);

app.controller('ProjectsController', ['$scope', 'projectService', function($scope, projectService) {

}]);

如何调用指令：

<projects></projects>

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

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

Angular：ng-repeat计算视图中的数据

2 个答案: