Question

我有一个在localhost上运行的服务器，它会吐出一个json

curl localhost:55556 | jq '.'
[
  {
    "Stack": "prom--1-2-3--jdkfdjkfds",
    "Url": "http://prom.service.us-east-1.aws.fios.tv",
    "Members": [
      {
        "Name": "ip1",
        "Status": "active"
      },
      {
        "Name": "ip2",
        "Status": "passive"
      }
    ]
  },
  {
    "Stack": "prom--4-5-6--jdkfdjkfds",
    "Url": "http://prom456.service.us-east-1.aws.fios.tv",
    "Members": [
      {
        "Name": "ip3",
        "Status": "active"
      },
      {
        "Name": "ip4",
        "Status": "passive"
      }
    ]
  }
]

现在我有一个有角度的页面试图检索json数据并显示它...在Firefox中，当我看到INspect它显示＆＃39;没有选择元素＆＃39; ....

<!doctype html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <!--<script src="script.js"></script>-->

    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<script>
  var animalApp = angular.module('animalApp', []);
  animalApp.controller('animalCtrl', function ($scope, $http){
  $http.get('http://localhost:55556').success(function(data) {
  $scope.animals = data;
  console.log(data);
  });
});
</script>


<style type="text/css">
  #t1 .center_middle {
    text-align: center;
    vertical-align: middle;
  }
</style>

</head>
<body  ng-app="animalApp">
<h2>My Page</h2>

<div ng-controller="animalCtrl" >

  <table class="table table-bordered sortable" style="width: 90%; margin: auto;" id="t1">
    <thead>
      <tr>
         <th class="text-center">Stack</th>
         <th class="text-center">Endpoint</th>
         <th class="text-center">Members</th>
         <th></th>
      </tr>
    </thead>
    <tr ng-repeat="animal in animals"> 
      <td class="center_middle">{{animal.stack}}</td>
      <td class="center_middle">{{animal.url}}</td>
      <td>
        <table class="table table-bordered sortable" border="1">
        <thead>
          <tr>
             <th class="text-center">Node</th>
             <th class="text-center">Status</th>
          </tr>
        </thead>
        <tr ng-repeat="subcat in animal.members">
         <td class="center_middle">{{subcat.name}}</td>
         <td class="center_middle">{{subcat.status}}</td>
        </tr>
        </table>
      </td>
      <td class="center_middle"><a href="/failover?node={{subcat.name}}&currentstatus={{subcat.status}}">Failover</a></td>
      <!-- <td class="center_middle"><button type="submit" class="btn btn-default">Failover</button></td> -->
    </tr>
  </table>

</div>

  </body>
</html>

console.log没有显示任何数据。我在这做错了什么？

Answer 1

由于您的属性名称在json中大写，因此需要在HTML文件中大写

    <tr ng-repeat="animal in animals"> 
      <td class="center_middle">{{animal.Stack}}</td>
      <td class="center_middle">{{animal.Url}}</td>
      <td>
        <table class="table table-bordered sortable" border="1">
        <thead>
          <tr>
             <th class="text-center">Node</th>
             <th class="text-center">Status</th>
          </tr>
        </thead>
        <tr ng-repeat="subcat in animal.Members">
         <td class="center_middle">{{subcat.Name}}</td>
         <td class="center_middle">{{subcat.Status}}</td>
        </tr>
        </table>
      </td>
      <td class="center_middle"><a href="/failover?node={{subcat.name}}&currentstatus={{subcat.status}}">Failover</a></td>
      <!-- <td class="center_middle"><button type="submit" class="btn btn-default">Failover</button></td> -->
    </tr>

Angularjs与json - 没有选择元素

1 个答案: