在 Angular 和 JSON 中填充正确的数据

Question

我正在创建一个角度模板，该模板将用于在 wordpress 微型网站上的每页仅显示一组徽标 - 多个页面，每页一个徽标及其变体。 data.json 信息主要是变体的 url。我的难题是如何编写能够正确填充相关数据的 javascript。我想也许将页面标题与 logo_name （来自 json 文件）进行比较是设置 for 循环的好条件，但我不确定如何编写其余的 js，也不确定在 controller.js 中的位置放置代码。这是一个由于某种原因没有正确链接的小提琴，js 显示了我想要的想法，但显然不起作用：https://jsfiddle.net/roob/qpzt5akp/2/ 这是控制器：

            var brandApp = angular.module('brandApp', []);

            brandApp.controller('brandingContr', ['$scope', '$http', function($scope, $http) {
                $http.get('./js/data.json').success(function(data) {
                    $scope.logos = data;

                    var data=JSON.parse(data);
                    var logoName = data.logo_name[i];

                    var pgTtl=document.querySelector('title').innerHTML;
                    var dataLength = data.length;

                    for (var i=0; i<dataLength; i++)
                        {
                            if (logoName === pgTtl) 
                                {
                                    $("#wrappr").append();
                                }           
                        }


                });
            }]);        

以下是 JSON 数据。任何和所有的帮助将不胜感激。

            [{ "logo_name" : "LA Times Core Logo",
                    "assets": {"display_logo" : "http://events.latimes.com/lat-branding/files/2015/08/2015-latlogo-300x37.png",
                                    "blk_jpg" : "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo.jpg",
                                    "blk_png": "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo.png",
                                    "blk_eps" : "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo.eps",
                                    "wht_png" : "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo_White.png",
                                    "wht_eps" : "http://events.latimes.com/lat-branding/files/2015/08/15LAT_Core_logo_White.eps"}
            },
            {   "logo_name" : "LA Times Media Group Logo",
                "assets": {"display_logo" : "http://events.latimes.com/lat-branding/wp-content/themes/lat-branding/img/15_LAT_MediaGroup_Logo.jpg",
                                    "blk_jpg" : "http://events.latimes.com/lat-branding/files/2015/08/15_LAT_MediaGroup_Logo1.jpg",
                                    "blk_png": "http://events.latimes.com/lat-branding/files/2015/08/15-LAT-Media-Group-Logo1.png",
                                    "blk_eps" : "http://events.latimes.com/lat-branding/files/2015/08/15_LAT_MediaGroup_Logo1.eps",
                                    "wht_png" : "http://events.latimes.com/lat-branding/files/2015/08/15-LAT-Media-Group-Logo-W1.png",
                                    "wht_eps" : "http://events.latimes.com/lat-branding/files/2015/08/15_LAT_MediaGroup_Logo_W1.eps"}
            }] 

Answer 1

这是您需要的代码的更新小提琴：

http://jsfiddle.net/qpzt5akp/6/

那里有一些代码可以使它与 jsfiddle 一起工作，但应该很明显。主要内容：不要使用 ng-repeat。这里不需要。

这是你的控制器：

angular.module('brandApp', [])
    .controller('brandingContr', ['$scope', '$http', function($scope, $http) {
        $http.get('./js/data.json').then(function(data) {
            var logos = JSON.parse(data);
            var pgTtl = window.title; // or document.querySelector('title').innerHTML;      
            var matchingLogos = logos.filter(function(it,ix,arr) {
                return it.logo_name === pgTtl;
            });
            if(matchingLogos && matchingLogos.length > 0) {
                $scope.logo = matchingLogos[0];
            } else {
                //handle case for no logo found here.
                //Maybe a default logo, this would continue Promise
                //Throwing an error here would reject the current Promise.
            }
            return $scope.logo;  //Continue Promise
        });
    }]);