Question

我正在创建一个角度模板，用于在wordpress微网站上每页仅显示一组徽标 - 多个页面，每页一个徽标及其变体。 data.json信息主要是变体的url。我的难题是如何编写将正确填充相关数据的javascript。我想也许将页面标题与logo_name（来自json文件）进行比较是设置for循环的一个很好的条件，但是我不知道如何编写其余的js，也不确定控制器中的位置.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
        });
    }]);

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

1 个答案: