Angularjs使用JSON - 無元素選擇

我在本地主機上運行的serivce它吐出JSONAngularjs使用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時顯示'沒有選擇元素'...

<!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顯示沒有數據。我在這裏做錯了什麼？

來源

2017-07-14 mg03

資本化是什麼的console.log（數據）顯示？它是不確定的嗎？ – Ero

1）console.log（data）什麼也沒有顯示，即沒有數據2）我試着用大寫的成員 - 問題持續存在 – mg03

如果你在瀏覽器中輸入'http：// localhost：55556'，會發生什麼？ – Ero

因爲你的財產的名字在你的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>

來源

2017-07-14 18:12:34 Ero

Angularjs使用JSON - 無元素選擇

回答

相關問題