UI-Router Filter Json Data

Question

I am a beginner at JavaScript and Angular, and I'm and trying to Implement AngularJS on my website. I have been watching tutorials on CodeSchool, Egghead etc. But I am stuck at the very beginning. Displaying JSON data on my website. I'm using UI-router to load "icerik.html"

Index.html

     <div class="row" ui-view>
        <div class="col s8 offset-s1"  ng-controller = "nbgCtrl">
        <div class="row">
        <div class="col s12 m6 l4" ng-repeat = "manga in mangas">
        <div class="row">
        <div class="col s5">
            <a ui-sref="icerik" class="thumbnail">
            <img src="/kapaklar/{{manga.kapak}}">
            </a>
        </div>
        <div class="col s7">
        <p>{{manga.ad}}</p>

        <a href="" class="waves-effect waves-light btn">

        </a>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>

When I click "ui-sref" it has to load JSON data related to {{manga.kapak}}. So if this {{manga.kapak}} belongs to dataset1 then load dataset1 from JSON data. Datasets I mean JSON data like this:

JSON Data:

[{"id":"1","ad":"Naruto","yazar":"Masashi KISHIMOTO","kapak":"naruto.jpg"},
{"id":"2","ad":"One Piece","yazar":"Eiichiro ODA","kapak":"one_piece.jpg"}]

JS:

angular.module('nasuh',["ui.router"])
.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise("/");

$stateProvider
.state('index', {
  url: "",
})
$stateProvider
.state('icerik', {
  url: "/icerik",
  templateUrl: "icerik.html",
  controller: "mmgCtrl",
  resolve: {
  isimler : function(MY){
    return MY.isimler;
 }
 }
 })
 })

.factory('MY', function($http){
 var factory = {};
 var url = '/uzak/remote.php?callback=JSON_CALLBACK';
 factory.isimler = $http.get(url);
 return factory;
})
.controller('nbgCtrl', function($scope, MY) {
     //I handle here the success of the $http call
     MY.isimler.success(function(alHemen){
          $scope.mangas = alHemen;
     });  
 })
.controller('mmgCtrl', function($scope, isimler) {
 $scope.manga = isimler;  
})

Answer 1

Looks like you wanted to show detail data for which you need to create one more route that will take care of showing details view

Markup

<div class="col s12 m6 l4" ng-repeat="manga in mangas">
    <div class="row">
        <div class="col s5">
            <a ui-sref="icerikDetails({id:manga.id})" class="thumbnail">
                <img src="/kapaklar/{{manga.kapak}}">
            </a>
        </div>
        <div class="col s7">
            <p>{{manga.ad}}</p>

            <a href="" class="waves-effect waves-light btn">

            </a>
        </div>
    </div>
</div>

Additional State

$stateProvider
.state('icerikDetails', {
  url: "/icerik/:id",
  templateUrl: "icerikDetails.html",
  controller: "mmgCtrl",
       resolve: {
         getData : function(MY, $stateParams, $filter){
            return MY.isimler.then(function(res){
                return $filter('filter')(res.data, {id: $stateParams.id}: true)[0];
            });
       }
     }
   })
 })

icerikDetails.html

<div>{{details }}</div>

mmgCtrl

.controller('mmgCtrl', function($scope, getData) {
    $scope.manga = getData.then(function(data){
       $scope.details = data; //data will available here
    });  

})