角度：ng-repeatビューでデータを計算

Question

私は角度のあるウェブサイトを作成していますが、次の問題があります。私は私のjsonファイルから取得する2つのデータ配列を持っています。

私は、ng-repeatを使用して自分のプロジェクトをHTMLファイルにして、別のng-repeatを使用してprojects.languagesを使用します。 私がしたいことは、すべての言語について、私は言語データ を検索し、他の情報を得ることになることを確認することです。

ng-repeatでeasly言語を取得するにはどうすればいいですか？データを非同期で取得するため、 というデータがまだavaibleでないことを計算する必要があります。

これは私が今持っているコードです：

<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をこれに変更してください：

​​

Answer 2

私は本当にあなたのお尻を大好きでしたが、私は指示で別のアプローチをしました。私はあなたのお尻をテストし、それは正しいawnserのように見えます。

これは私がやったことです：

プロジェクト-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>