我正在尝试以下列格式显示我拥有的JSON数据。我被困在一个点上，瓦片中显示的数据来自服务。它需要根据来自其他服务的数据进行样式设计。
我无法找到可以实现此功能的中间地带。任何人都可以查看我的代码并帮助我吗？
(function() {
'use strict';
var cpiApp = angular.module('cpiApp', []);
cpiApp.controller('MainController', function($scope, $rootScope, CPIndexAPIService) {
var configArray = CPIndexAPIService.getConfig();
configArray.then(function successCallback(res) {
$scope.configData = res.data;
console.log($scope.configData);
},
function errorCallback(data, status, headers) {
console.log('Unable to fetch Configuration');
});
var titleArray = CPIndexAPIService.getTitle();
titleArray.then(function successCallback(res) {
$scope.titleData = res.data;
console.log($scope.titleData);
},
function errorCallback(data, status, headers) {
console.log('Unable to fetch Title');
});
var areasArray = CPIndexAPIService.getAreas();
areasArray.then(function successCallback(res) {
$scope.areasData = res.data;
console.log($scope.areasData);
},
function errorCallback(data, status, headers) {
console.log('Unable to fetch Title');
});
var cfDataArray = CPIndexAPIService.getProjectData('CF');
cfDataArray.then(function successCallback(res) {
$scope.cfDataArray = res.data;
console.log($scope.cfDataArray);
var cc = document.getElementByClassName("data-tile-small");
console.log(cc);
},
function errorCallback(data, status, headers) {
console.log('Unable to fetch data');
});
});
cpiApp.factory('CPIndexAPIService', function($http) {
return {
getConfig: function() {
return $http.get('JSON/GetConfig.json');
},
getTitle: function() {
return $http.get('JSON/GetTitle.json');
},
getAreas: function() {
return $http.get('JSON/GetProjects.json');
},
getProjectData: function(id) {
return $http.get('JSON/bodyData/'+id+'/'+id+'.json');
}
};
});
})();body {
background: #212121;
padding: 0 !important;
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
color: white;
}
.container {
width: 90%;
margin: 0px auto;
padding: 0 10px;
}
.navbar {
padding: 10px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background: #424242;
}
.logo, .logo-title {
display: inline-block;
float: left !important;
vertical-align: middle;
}
.logo {
width: 6%;
}
.logo>img {
width: 100%;
}
.logo-title {
margin-left: 15px;
font-size: 30px;
}
.area-title {
margin-right: 60px;
font-size: 26px;
}
.logo-title, .area-title {
font-weight: bold;
padding: 10px 0;
}
.area-title {
float: right !important;
}
.text-wrapper {
width: 60%;
text-align: center;
display: inline-block;
}
.main-wrapper {
float: right;
width: 38%;
height: 435px;
margin-right: 15px;
}
.data-tile-small {
display: inline-block;
margin: 0px auto;
margin-right: 10px;
margin-bottom: 10px;
min-width: 120px;
min-height: 150px;
width: calc((100% - 60px)/3);
height: calc((100% - 10px)/2);
background: #424242;
padding: 5px;
}
.data-tile-large{
min-width: 200px;
width: 100%;
background: #424242;
padding: 5px;
}
.project-tile-title {
font-weight: normal;
font-size: 24px;
padding: 15px 5px;
text-align: left;
}
.project-cpivalue{
text-align: center;
line-height: 200%;
font-size: 75px;
}<!DOCTYPE html>
<html ng-app="cpiApp">
<head>
<title>CF Compliance Index</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Consumer Facing Compliance Index Dashboard">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/app.css" media="screen" title="no title" charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="js/app.js" charset="utf-8"></script>
</head>
<body ng-controller="MainController">
<div class="navbar">
<div class="container">
<div class="logo">
<img src="images/adidas_logo_vector_inverted_resized.png" alt={{configData.logo.alternateText}}>
</div>
<div class="logo-title">
{{titleData.title}}
</div>
<div class="area-title">
<input type="hidden" name="" value={{areasData.projects[0].Key}}>
{{areasData.projects[0].Value}}
</div>
</div>
</div>
<div style="margin-top: 80px;padding: 10px;">
<div class="text-wrapper">
<div class="data-tile-small" ng-repeat="project in cfDataArray.projects">
<input type="hidden" name="project-id" value={{project.key}}>
<div class="project-tile-title">
{{project.value}}
</div>
<div class="project-cpivalue" ng-attr-id={{'cpindex-'+$index}}>
{{project.cpindex}}
</div>
</div>
</div>
<div class="main-wrapper">
<div class="data-tile-large" style="padding-top: 140px;padding-bottom: 150px;">
<input type="hidden" name="project-id" value={{cfDataArray.key}}>
<div class="project-tile-title" style="text-align: center; font-size: 30px;">
{{cfDataArray.value}}
</div>
<div class="project-cpivalue" style="line-height: 125%;">
{{cfDataArray.cpindex}}
</div>
</div>
</div>
</div>
</body>
</html>我试过几种方法。没有像预期的那样平息。我需要根据来自
.project-cpivalue的JSON数据将样式应用于configArray.thresholds中的数据。
GetConfig.json：
{
"logo" : {
"src" : "http://chnmct247802d/cpi/images/adidas_logo_vector_inverted_resized.png",
"alternateText" : "Adidas Logo"
},
"pageTitle" : "Compliance Index Dashboard",
"thresholds" : [{
"Value" : 85,
"color" : "crimson"
},{
"Value" : 94,
"color" : "coral"
},{
"Value" : 104,
"color" : "yellow"
},{
"Value" : 109,
"color" : "darkseagreen"
},{
"Value" : 110,
"color" : "green"
}
],
"marquee" : {
"needed" : false,
"content" : "Some Text Here ..."
},
"refresh" : {
"needed" : false,
"pageRefreshInterval" : 60000
}
}
请看看这个，并建议我前进的方向。