That looks generally like the right idea, just a few things that I can see are wrong with it. Make sure you have $scope instead of scope is the first one. $scope will always be the scope of the controller you are currently in, so defines “global” functions and variables for each page - an important part of Ionic.
Secondly, in the ng-click you are passing the parameter x.category into the function. Now, assuming you have built the API yourself (meaning you specifiy what the “category” value of each object in your categoryData array is i.e. could be just a string with the category name, could be an integer ID, could be anything you like), you just have to make sure the $scope.goToCategory function handles it properly:
In your plunker, the “category” keys all have values that are strings (‘Recreation’ for example.) This is what is being passed into your goToCategory function. So you function should firstly have the parameter defined (should look like $scope.goToCategory = function(categoryString){ do stuff };)
Now firstly, you have to decide whether you want a separate screen for each category (lots of duplicate code, but probably more simple to start out with), or a single page that can load different data depending on which category is selected. I’m gong to try and run through how to make the single page now since it’s the more elegant solution.
Let me know what you want the category screen to look like and I’ll see if I can edit this to make it more sensible to your usecase.
In the controller for the screen where you select the category element (from now on, I’ll refer to this as mainCtrl), you’ll want the goToCategory function defined:
$scope.goToCategory = function(categoryString){ <- categoryString is the parameter being passed in
categoriesService.categoryString = categoryString; <- we will define this service later
$state.go('app.category') <- switch to category screen
}
The categoriesService is a service which I’ll define now. Services can handle variables across scopes, so they’re great for passing data between views (such as the desired category to the ‘Category’ screen) Make sure to inject the service into your mainCtrl like so:
.controller('mainCtrl', function($scope, $state, categoriesService) { do stuff }
Then this is your service in services.js:
angular.module('app.services', [])
.service('categoriesService', [function(){
this.categoryString; <- this stores the selected category
this.categoriesList = [ <- this stores array of categories, budgets etc.
{category: 'Recreation', budget: "" etc...}
{ etc... }
];
}])
I would also consider storing your categoryData in this service, so that it can be accessed from anywhere, such as I have done above. Then to get this data into your mainCtrl, simply do $scope.selectedCategory = categoriesService.categoriesList
So, now you can access the list of categories from anywhere, and also send parameters to your Category view. In CategoriesCtrl, you can now get this variable by doing $scope.categoryString = categoriesService.categoryString (you also have to inject the service into this controller), which will set $scope.categoryString to the string value you defined in your array - such as ‘Recreation’.
You should then be able to do what you want with that information, change the title etc. To get the other information that is relevant to the category (e.g. the value of budget for the category ‘Recreation’), you will have to search through your array to find the index of the object where the category key is equal to whichever string you’ve passed in. This can be done by iterating over the array as so:
$scope.selectedCategory = categoriesService.categoriesList <- Get array
$scope.categoryString = categoriesService.categoryString <- Get string of selected category
var arrayItem = $scope.selectedCategory.find(function(item, i){
if(item.category === $scope.categoryString){ <- finds array item where category = categoryString
return item <- returns the entire item
};
});
Using this and your example, if you select the category ‘Recreation’, the object that is returned (arrayItem) will be:
{category: 'Recreation', budget: '$400', actual: '$200', remaining: '$100', id: 4 } so you can then use all the data.
However, if your selectedCategory list gets huge, this iteration could be very slow, so I’d consider refactoring your selectedCategory array to make it easy to index via the categoryString. Let me know if this makes sense or if you need anything else!
EDIT: Here’s a plunker with code that should work in an Ionic environment if you copy all the main parts. Doesn’t work on Plunker as-is because can’t XS load angular and UI-Router