javascript - UI-Router过滤Json数据

Question

我是 JavaScript 和 Angular 的初学者，我正在尝试在我的网站上实现 AngularJS。我一直在看 CodeSchool、Egghead 等教程。但我一开始就卡住了。在我的网站上显示 JSON 数据。我正在使用 UI-router 加载“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>

当我点击“ui-sref”时，它必须加载与 {{manga.kapak}} 相关的 JSON 数据。因此，如果此 {{manga.kapak}} 属于 dataset1，则从 JSON 数据加载 dataset1。数据集我指的是这样的 JSON 数据:

JSON 数据:

[{"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

看起来您想要显示详细数据，您需要为其创建另一条路线来负责显示详细信息 View

标记

<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>

其他状态

$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
    });  

})