我们在动态显示滑块中的图像时遇到问题。当我们点击列表中的特定图像时，它必须显示在滑块中。我们从json文件中获取图像。问题是图像不是显示在滑块中，但点击功能正常工作。点击的图像ID也显示在控制台中。 这是代码：
enter code here
JSON:
[{
"menuId": "01",
"menuItem": "manuchuriya",
"menuImage": "img/Categoryimages/manchuria.jpe",
"items": [{
"id": "001",
"itemName": "Noodles",
"itemImage": "item_images/aloo_chaat.jpg",
"price": "$30",
"description": "Add water or veg stock.mix well and add let the sauce simmer for 1-2 minutes.add the cornflour paste to thicken the sauce.Thicken the sauceto your desired consistency.add vinegar, salt, sugar and the fried veg balls.serve veg manchurian garnished with spring onion greens."
},
{
"id": "002",
"itemName": "Noodles",
"itemImage": "item_images/samosa.jpg",
"price": "$20",
"description": "Add water or veg stock.mix well and add let the sauce simmer for 1-2 minutes.add the cornflour paste to thicken the sauce.Thicken the sauceto your desired consistency.add vinegar, salt, sugar and the fried veg balls.serve veg manchurian garnished with spring onion greens."
}]
},
{
"menuId": "02",
"menuItem": "icecream",
"menuImage": "img/Categoryimages/ice-cream.jpg",
"items": [{
"id": "001",
"itemName": "salad",
"itemImage": "item_images/fruit_juice.jpg",
"price": "$40",
"description":"Add ghee, salt and carom seeds in maida. Mix all ingredients. Cut paneer into small chunks.Peel potatoes and mash them Knead the dough until it becomes soft. Take little amount of dough and roll it."
},
{
"id": "002",
"itemName": "salad",
"itemImage": "item_images/bevarages.jpg",
"price": "$20",
"description":"Add ghee, salt and carom seeds in maida. Mix all ingredients. Cut paneer into small chunks.Peel potatoes and mash them Knead the dough until it becomes soft. Take little amount of dough and roll it."
}]
},
{
"menuId": "03",
"menuItem": "franke",
"menuImage": "img/Categoryimages/samosas.jpg",
"items": [{
"id": "001",
"itemName": "salad",
"itemImage": "item_images/frankie.jpg",
"price": "$30",
"description":"Add ghee, salt and carom seeds in maida. Mix all ingredients. Cut paneer into small chunks.Peel potatoes and mash them Knead the dough until it becomes soft. Take little amount of dough and roll it."
},
{
"id": "002",
"itemName": "salad",
"itemImage": "item_images/aloo_chaat.jpg",
"price": "$40",
"description":"Add ghee, salt and carom seeds in maida. Mix all ingredients. Cut paneer into small chunks.Peel potatoes and mash them Knead the dough until it becomes soft. Take little amount of dough and roll it."
}]
}]
控制器：
angular.module('starter')
.controller('menuitemCtrl', function ($scope,$state,$q,$stateParams,menuService) {
console.log($stateParams.id);
$scope.id = $stateParams.id;
var getMenuList = function(){
menuService.getMenuListData()
.then(function sucessCallback(response){
$scope.menulists = response;
console.log("menu");
for(var i in $scope.menulists.items)
{
if($scope.menulists[i].items[i].id === $scope.id)
{
$scope.SliderItem=$scope.menulists[i].items[i];
console.log(SliderItem);
}
}
function errorCallback(error){
return $q.reject(error);
});
};
getMenuList();
});
HTML代码：
<ion-view class="view-styles-item" style="margin-left: 24%">
<ion-content scroll="false">
<ion-slides options="options" slider="data.slider">
<ion-slide-page ng-repeat="item in SliderItem.items">
<div class="row">
<img src="img/menuitem/{{item.itemImage}}" style="width: 52%;">
</div>
<div class="row">
<p>{{item.description}}</p>
<p>{{item.price}}</p>
</div>
</ion-slide-page>
</ion-slides>
</ion-content>
点击事件HTML代码：
<ion-view class="view-styles-menu" >
<ion-content >
<div ng-repeat="item in SelectedMenu.items" >
<div class="row menu-row">
<div class="col">
<!-- <a href="#/tab/home/item?id={{item.id}}"> -->
<img src="/img/menuitem/{{item.itemImage}}" class="menu-img_styles" ng-click="goToMenuItem(item.id)">
</div>
<div class="col">
{{item.itemName}}
</div>
<div class="col">
{{item.price}}
</div>
</div>
</div>
<ion-nav-view name="tab-item"></ion-nav-view>
</ion-content>
<div class="divider"></div>
</ion-view>
控制器：
$scope.goToMenuItem = function(paramId){
$state.go('tab.home.menu.item',{id:paramId});
};