[英]UI-Router Filter Json Data
I am a beginner at JavaScript and Angular, and I'm and trying to Implement AngularJS on my website. 我是JavaScript和Angular的初学者,并且正在尝试在我的网站上实现AngularJS。 I have been watching tutorials on CodeSchool, Egghead etc. But I am stuck at the very beginning. 我一直在看有关CodeSchool,Egghead等的教程。 Displaying JSON data on my website. 在我的网站上显示JSON数据。 I'm using UI-router to load "icerik.html" 我正在使用UI路由器加载“ icerik.html”
Index.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}}. 当我单击“ ui-sref”时,它必须加载与{{manga.kapak}}相关的JSON数据。 So if this {{manga.kapak}} belongs to dataset1 then load dataset1 from JSON data. 因此,如果此{{manga.kapak}}属于数据集1,则从JSON数据加载数据集1。 Datasets I mean JSON data like this: 数据集我的意思是这样的JSON数据:
JSON Data: JSON数据:
[{"id":"1","ad":"Naruto","yazar":"Masashi KISHIMOTO","kapak":"naruto.jpg"},
{"id":"2","ad":"One Piece","yazar":"Eiichiro ODA","kapak":"one_piece.jpg"}]
JS: 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;
})
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 icerikDetails.html
<div>{{details }}</div>
mmgCtrl mmgCtrl
.controller('mmgCtrl', function($scope, getData) {
$scope.manga = getData.then(function(data){
$scope.details = data; //data will available here
});
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.