Angular.js를 처음 사용합니다. 여기서 저는 제품의 이미지, 이름 및 비용을 표시해야하는 장바구니를 개발하고 있습니다. 여러 테넌트가 있고 각 테넌트에는 listOfMerchandise가 포함 된 listOfBinaries 배열이 있습니다. 내 문제는 테넌트의 이름, listOfBinary의 이미지 및 listOfMerchandise의 비용을 표시해야한다는 것입니다. 아래와 같이 JSON을 구문 분석했지만 실행하는 동안 빈 페이지가 나타납니다. 누구든지 나를 도울 수 있습니까? REST URL에 AJAX 호출을 한 후 얻은 JSON은 다음과 같습니다.
{
"_links": {
"search": {
"href": "http://localhost:8080/sportsrest/tenants/search"
}
},
"_embedded": {
"tenants": [
{
"name": "tenant1",
"domainName": "gaming.com",
"description": "sasasa",
"listOfBinary": [
{
"imageURL": "http://i.telegraph.co.uk/multimedia/archive/02602/premier-league_2602603b.jpg",
"username": "Sumanth",
"description": "imagSky Sports offer free live Premier League action on o Sky Sports offer free live Premier League action on opening weekend of season as battle witpening weekend of season as battle wite1",
"listOfMerchandise": [
{
"rate": 100,
"type": "item1",
"shortDescription": "test1"
}
]
},
{
"imageURL": "http://images.clipartpanda.com/sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
"username": "as",
"description": "Sky Sports offer free live Premier League action on opening weekend of season as battle wit Sky Sports offer free live Premier League action on opening weekend of season as battle wit",
"listOfMerchandise": [
{
"rate": 200,
"type": "item2",
"shortDescription": "test2"
}
]
}
],
"merchandise": null,
"_links": {
"self": {
"href": "http://localhost:8080/sportsrest/tenants/2"
},
"listOfCustomerPackage": {
"href": "http://localhost:8080/sportsrest/tenants/2/listOfCustomerPackage"
}
}
},
{
"name": "tenant2",
"domainName": "cric.io",
"listOfBinary": [
{
"imageURL": "http://i.telegraph.co.uk/multimedia/archive/02602/premier-league_2602603b.jpg",
"username": "Sumanth",
"description": "Sky Sports offer free live Premier League action on opening weekend of season as battle wit Sky Sports offer free live Premier League action on opening weekend of season as battle wit",
"listOfMerchandise": [
{
"rate": 500,
"type": "item5",
"shortDescription": "test5"
}
]
},
{
"imageURL": "www.test.com",
"username": "sumanth",
"description": "sample",
"listOfMerchandise": [
{
"rate": 2323,
"type": "type7",
"shortDescription": "test"
}
]
}
],
"merchandise": null,
"_links": {
"self": {
"href": "http://localhost:8080/sportsrest/tenants/9"
},
"listOfCustomerPackage": {
"href": "http://localhost:8080/sportsrest/tenants/9/listOfCustomerPackage"
}
}
},
{
"name": "tenant5",
"domainName": "test.co",
"description": "test 123 ",
"listOfBinary": [],
"binary": {
"fileLocation": "www.test.com",
"username": "sumanth",
"description": "sample",
"listOfMerchandise": [
{
"rate": 2323,
"type": "trt",
"shortDescription": "rtrtrt"
}
]
}
}
]
}
}
내 directives.js 파일 :이 Ajax 호출을 할 때 JSON 이상이됩니다.
myAppDirectives.
controller('items_display', function ($scope,$http) {
$http({ method: 'GET', url: 'http://localhost:8080/sportsrest/tenants/' }).success(function (data) {
$scope.carts=data;
}).
error(function (data) {
alert("error" + data);
console.log(data);
});
});
내 HTML 페이지 :
<!DOCTYPE html>
< html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" >
<div ng-controller="items_display">
<div ng-repeat="item in carts._embedded.tenants">
<div type="text" class="item_name" value={{item.name}} >
<div ng-repeat="item in carts._embedded.tenants.listOfBinary">
<img class="shop_img" ng-src="{{item.fileLocation}}" ng-style="{'width':'100px', 'height':'100px'}" />
<div ng-repeat="item in carts._embedded.tenants.listOfBinary.listOfMerchandise">
<div type="text" class="item_cost" value={{item.rate}} >
</div>
</br>
</div>
</div>
</div>
</body>
누구나 Angular.js를 사용하여 html 페이지에 제품 세부 정보를 표시하는 데 도움을 줄 수 있습니까?
미리 감사드립니다
당신의 마크 업이 모두 엉망이되었습니다. 제가 당신의 데이터와 마크 업으로 만든 플 런커를 확인하세요
http://plnkr.co/edit/jGCm6nO9S4hlNxLCyrSy?p=preview
<body>
<div ng-app="myApp">
<div ng-controller="items_display">
<div ng-repeat="tenant in carts._embedded.tenants">
<div type="text" class="item_name">{{tenant.name}}
<div ng-repeat="binary in tenant.listOfBinary">
<img class="shop_img" ng-src="{{binary.fileLocation}}" ng-style="{'width':'100px', 'height':'100px'}" />
<div ng-repeat="(key, value) in binary.listOfMerchandise[0]">
<div type="text" class="item_cost">{{key}}: {{value}}
</div>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다