Как передать id текущего объекта из ng-repeat?
Есть приложение, написанное на AngularJS. В нем есть два модуля: в первом отправляется запрос на сервер, который возвращает массив объектов с данными, после чего, через ng-repeat массив перебирается и на странице рендерятся отдельно все схожие по структуре элементы. По нажатию на определенный элемент, вызывается другой модуль, который предоставляет подробную информацию о выбранном элементе. Запрос к выбранному элементу осуществляется посредством добавления в адресную строку его id <a href=".../id/"
Вопрос заключается в том, как передать id именно выбранного элемента, чтобы затем отобразить только его подробную информацию?
Ниже приведен код:
Страницы с отображением всех элементов:
template:
<li ng-repeat="track in recievedTracks"
class="thumbnail music-list-item">
<div class="row">
<div class="col-md-3">
<a href="#!/musics/{{track._id}}" class="thumb">
<img ng-src="{{track.media.image}}" alt="{{track.name}}" />
</a>
</div>
<div class="col-md-5">
<a href="#!/musics/{{track._id}}">{{track.name}}</a>
<p>{{track.media.snippet}}</p>
<audio controls>
<source ng-src="{{track.media.result}}" type="audio/mpeg">
</audio>
</div>
</div>
</li>
service:
function getTracks() {
return $http
.get("http://localhost:1111/api/tracks");
};
controller:
_init();
function _init() {
Track.getTracks()
.then(function(response) {
$scope.recievedTracks = response.data;
})
};
Страницы с выбранным элементом:
template:
<li ng-repeat="track in recievedTrackById"
class="thumbnail music-list-item">
<a href="/"> Back </a>
<!-- <a href="/"> Back </a> -->
<img ng-src="{{track.media.image}}" alt="{{track.name}}" />
<audio controls>
<source ng-src="{{track.media.result}}" type="audio/mpeg">
</audio>
<p>{{track.author}}</p>
<h1>{{track.name}}</h1>
<p>{{track.media.snippet}}</p>
</li>
controller:
_init();
function _init() {
Track.getTrackById()
.then(function(response) {
$scope.recievedTrackById = response.data;
})
}