By the method ui- sref I am sending an ID obtained from an array of scope , but would like to know how do I get that id in the page that I 'm sending ?
If I get the id , how do I look at the scope array of information regarding that id ?
<ion-view title="Noticias">
<ion-content ng-controller="noticiasCtrl" style="top:0">
<div class="header-image"></div>
<ion-list>
<ion-item ng-repeat="item in rawData" class="item-noticias overlay" ng-style="{'background':'url(img/{{item.bg}}) no-repeat center', 'background-size':'cover'}">
<div class="overlay" ui-sref="forgotpassword({ id: item.tipo })">
<p>{{ item.tipo }}</p>
<p>{{ item.titulo }}</p>
<p><a href="#/app/forgot-password">Leer mas</a></p>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
controller :
.controller("noticiasCtrl", function($scope)
{
$scope.rawData = [{
"tipo": "noticia",
"titulo": "Fin de semana de Madres",
"bg": "img1.png"
}, {
"tipo": "evento",
"titulo": "Eminem en vivo, 10% off",
"bg": "img2.png"
}, {
"id": "noticia",
"titulo": "12 Cosas para comprar",
"bg": "img3.png"
}];
})
You could get that id
inside you controller using $state
/$stateParams
service. $state.params.id
for $state
& $stateParams.id
for $stateParams
.
Make sure you should injected the respective dependency before using it.
Additionally you shouldn't be using {{}}
interpolation directive. Change your ng-style
expression to ng-style="{'background':'url(img/'+item.bg +') no-repeat center', 'background-size':'cover'}"
.
Markup
<ion-item ng-repeat="item in rawData| filter: {id: id}: true" class="item-noticias overlay"
ng-style="{'background':'url(img/'+item.bg +') no-repeat center', 'background-size':'cover'}">
<div class="overlay" ui-sref="forgotpassword({ id: item.tipo })">
<p>{{ item.tipo }}</p>
<p>{{ item.titulo }}</p>
<p><a href="#/app/forgot-password">Leer mas</a></p>
</div>
</ion-item>
Controller
.controller("noticiasCtrl", function($scope, $state)
{
//id retrieved from state, it could be different if variable name in state is different
$scope.id = $state.params.id;
$scope.rawData = [{
"tipo": "noticia",
"titulo": "Fin de semana de Madres",
"bg": "img1.png"
}, {
"tipo": "evento",
"titulo": "Eminem en vivo, 10% off",
"bg": "img2.png"
}, {
"id": "noticia",
"titulo": "12 Cosas para comprar",
"bg": "img3.png"
}];
})
What is your forgotpassword
function doing? That would be the thing that could generate the proper state ULR so that it could be extracted via $state.params
on the route it lands on.