I'm new to Angular + Ionic and trying to figure out how I can allow users to select an item from a list and view it (drilling into a list essentially).
Currently I have a service that makes an AJAX GET call:
.service('NCAAF',function($http, $ionicLoading) {
return {
get: function() {
$ionicLoading.show({
template: 'Loading...',
delay: 300
})
return $http(
{
method: 'GET',
cache: true,
url: 'URL HERE',
});
}
};
})
Then controller that puts the data in scope:
NCAAF.get().
success(function (data) {
$scope.data = data['results']['collection1'];
$ionicLoading.hide();
}).
error(function () {
$ionicLoading.hide();
var alertPopup = $ionicPopup.alert({
title: 'Something went wrong',
template: 'Try reloading in a few seconds.'
});
alertPopup.then(function() {
console.log('Fix this ish');
});
}).
finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
And finally the list view of the array of data (the rows) that iterates over the object in the view.html
<ion-item ng-repeat="row in data | filter:search">
<span class="gametime">{{row['gametime']['text'] | parseTime}}</span>
<div class="teampic" style="background-image: url({{row['awayteam']['src']}});"></div> @ <div class="teampic" style="background-image: url({{row['hometeam']['src']}});"></div>
({{row['currentline']}})
</ion-item>
In order to allow users to drill into a game page, I've added this to the view.html:
<ion-item ng-repeat="row in data | filter:search" href="#/tab/ncaaf/{{row['index']}}">
And I've added this to my app.js:
.state('tab.ncaaf-game', {
url: '/ncaaf/:gameid',
views: {
'tab-ncaaf': {
templateUrl: 'templates/ncaaf-game.html',
controller: 'NCAAFGameCtrl'
}
}
})
My question is: What needs to be in my controller so that in my new ncaaf-game.html view, I can have something like this for the individual game:
<ion-view title="{{game.row['awayteam']['text']}}">
<ion-content has-header="true" padding="true">
</ion-content>
</ion-view>
I know I need something like this in my controller, but I'm unsure of the syntax:
.controller('NCAAFGameCtrl', function($scope, $stateParams, NCAAF) {
$scope.game = Games.get($stateParams.row['collection1']['index']);
})