Question

与我一起工作的json就是这样的：

{
 nameofProduct: {
   Alive: {
        ImServer1: {
              status: "low",
              title: "ImServer1"
        },
        ImServer2: {
             status: "high",
             title: "Imserver2"
       },
       ImServer3: {
             status: "medium",
             title: "ImServer3"
       }

我试图在里面显示名称ImServer1，ImServer2，ImServer3及其状态和标题。

我的角度js。 js文件看起来像这样

   var app = angular.module("nameofproduct", []);

     app.controller("MainController", function($scope, $http) {
      $scope.loading = true;
      $http.get('https://jsonp.nodejitsu.com/?url=http://jsonp.jit.su/?url=httpfakeurl.com').
      success(function(data, status, headers, config) {
      $scope.Servers = data;
      $scope.loading = false;
      }).
        error(function(data, status, headers, config) {
        console.log(data);
     });
});

目前我的html设置如下：

<body ng-app="nameofproduct">
 <div ng-controller="MainController">
 <div class="col-lg-6" ng-repeat="server in Servers">
        <div class="col-lg-6">{{server.nameofServer.Alive}}   </div>
        <div class="col-lg-1"><i class="{{server.status == 'low' ? 'thumbs-down' : 'humbs-up'}}" style="{{server.status == 'low' ? 'color:red;' : 'color:green;'}}"></i></div>
         <div class="col-lg-5">
                   <span class="badge" ng-class="{'badge-offline': server.status == 'low', 'badge-low': server.status == 'Low', 'badge-medium': server.status == 'medium', 'badge-high': server.status == 'high', 'badge-vhigh': server.status == 'evry high'}">{{server.status}}
                   </span>
         </div>

但目前只显示所有数据，并且不会将其拆分。我不确定我错过了什么，以及如何继续。

Answer 1

鉴于您拥有的json，当您执行$scope.Servers = data时，您实际放入$ scope.servers的是产品。因此，您的ng-repeat将尝试遍历nameofProduct以及该级别上的任何其他内容。

所以ng-repeat说好，第一个元素是nameofProduct。现在我需要为此打印server.nameofServer.Alive ..这几乎是上面儿子的一切。

要遍历各个服务器，您可以将控制器中的分配更改为

$scope.Servers = data.nameofProduct.Alive;

如果您在编写代码时不知道nameofProduct，可以使用循环，或者如果它不是数组但是单个产品使用Object.keys（）：

var productName = Object.keys(data)[0];
$scope.Servers = t[productName].Alive;

Answer 2

目前您正在做的是将来自http服务的数据直接分配给$scope.Servers = data;，这是不正确的。

看看JSON。

{
 nameofProduct: {
  Alive: {
    ImServer1: {
          status: "low",
          title: "ImServer1"
    },
    ImServer2: {
         status: "high",
         title: "Imserver2"
   },
   ImServer3: {
         status: "medium",
         title: "ImServer3"
     }
   }
 }

要获取所有服务器名称及其sattus，您必须使用JSON对象上的（。）＆＃34; nameofProduct＆＃34;像这样：

$scope.Servers = $scope.data.nameofProduct.Alive;

然后在范围对象上的服务器属性上分配它。

看看这个小提琴。你肯定会得到答案。我根据问题要求对其进行了修改

http://jsfiddle.net/Satbir/HB7LU/10377/

显示来自JSON的数据，该数据没有Angular JS的名称

2 个答案: