Detail View

ionic-v1
1

Hey guys,
I need some help with a detail view.
I’ve got a list of items and want to see a detail view after clicking them.

Here’s my code:
controller.js

    app.controller('SuggestionCtrl', ['$scope', 'suggestionService', '$state', function($scope, suggestionService, $state){
	$scope.suggestionId = $state.params.suggestionId;

	//Lädt alle Vorschläge
	function getSuggestionDetail(suggestionId) {
    suggestionService.getItem(suggestionId)
    .success(function (suggestion) {
      $scope.suggestion = suggestion;
    });
  };
}]);

service.js

    app.service('suggestionService', ['$http', function($http) {

	var baseUrl = 'path_to_php_file';

	this.getItems = function () {
    return $http.get(baseUrl);
  };

  this.getItem = function (id) {
    return $http.get(baseUrl + '?id=' + id);
  };
}]);

detail.html

    <ion-view view-title="Details">

  <ion-content>
    <ion-list>
      <ion-item ng-repeat="detail in suggestion | filter: {id:suggestionId}">
        <img ng-src="{{ detail.titelbildUrl }}" class="full-width">
        <h2>{{ detail.titel }}</h2>
        <p>{{ detail.beschreibung }}</p>
      </ion-item>
    </ion-list>  
  </ion-content>

</ion-view>
2

What is your problem?

3

Oops, forgot the most important sentence.
When I click an item, the detail view is empty. The app is using the right route e.g. http://localhost:8100/#/tab/suggestions/1.

Maybe I’m filtering the wrong way in the detail view?

<ion-item ng-repeat="detail in suggestion | filter: {id:suggestionId}">
4

Solved it!
Here’s my code:

controller.js

app.controller('SuggestionsCtrl', ['$scope', 'suggestionService', '$state', function($scope, suggestionService, $state){
	$scope.suggestionId = $state.params.suggestionId;

	suggestionService.getAll()
	.success(function(data) {
		$scope.suggestions = data;
	});

	suggestionService.get($scope.suggestionId)
	.success(function(data) {
		$scope.suggestion = data;
	});

service.js

app.factory('suggestionService', ['$http', function($http) {

	var baseUrl = 'path_to_data';

	return {
		getAll: function() {
			return $http.get(baseUrl);
		},

		get: function (id) {
			return $http.get(baseUrl + '/id=' + id);
		}
	}

detail.html

<ion-item ng-repeat="detail in suggestion | filter: {id:suggestionId}">
    <img ng-src="{{ detail.titelbildUrl }}" class="full-width">
    <h2>{{ detail.titel }}</h2>
    <p>{{ detail.beschreibung }}</p>
  </ion-item>
</ion-list>