У меня есть список элементов, отображаемых из службы, с помощью ng-repeat. Все эти элементы имеют ссылку "полная информация об элементе" (item.html). Общая страница, на которой будет отображаться дополнительная информация.
Каков наилучший способ передать данные элемента, по которому щелкнули, в item.html, чтобы отображаемая информация поступала из элемента, по которому щелкнули?
HTML выглядит следующим образом:
<div class="container" ng-app="myApp">
<div ng-controller="ItemController">
<div ng-repeat="item in data.details">
<div class="wrapper">
<h3>{{item.title}}</h3>
<p>{{item.description}}</p>
<a href="#myModal" class="btn" openmodal>Open modal</a>
<a href="item.html">View full item details</a>
</div>
</div>
</div>
</div>
Угловой
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
var Data = {};
Data.details = [
{
"id": 1,
"title": "Item 1",
"description": "Post 1 description - Nullam ac tellus sed mi laoreet placerat.",
"more": "more info"
},
{
"id": 2,
"title": "Item 2",
"description": "Post 2 description - Cociis natoque penatibus et magnis dis parturient montes.",
"more": "more info"
},
{
"id": 3,
"title": "Item 3",
"description": "Post 3 description - Nullam ac tellus sed mi laoreet placerat.",
"more": "more info"
}
]
return Data;
});
// Controller
function ItemController($scope, Data){
$scope.data = Data;
}
заранее спасибо
ИЗМЕНИТЬ
Я создал свои маршруты, HTML-страницу для каждого маршрута, а затем использовал ng-view для отображения соответствующего контента.
Смотрите мой код ниже:
// Routes
myApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl:"home.html"
})
.when('/task', {
templateUrl:"item.html"
})
})
// Controller
function ItemController($scope, $location, Item){
$scope.data = Item;
$scope.viewDetail = function(item) {
$scope.currItem= item;
$location.path('/item');
}
}
Теперь index.html выглядит так:
<div class="container">
<ng-view></ng-view>
</div>
Затем я создал отдельные файлы для своих маршрутов:
home.html
<div class="container" ng-app="myApp">
<div ng-controller="ItemController">
<div ng-repeat="item in item.details">
<h3>{{item.title}}</h3>
<a ng-click="viewDetail(item)">View full item details</a>
</div>
</div>
</div>
item.html
<div class="container" ng-app="myApp">
<div ng-controller="ItemController">
<h3>{{currItem.title}}</h3>
<p>{{currItem.description}}</p>
</div>
</div>
Моя ссылка (Просмотр полной информации об элементе) в home.html использует ng-click для передачи нажатого объекта "item".
Теперь я хотел бы использовать этот объект элемента в item.html console.log(item) дает мне правильный объект.
Я попытался использовать «currItem» в item.html для отображения правильных данных. Это не работает.
Не уверен, что мне здесь не хватает?
