i have following code displays static json object in grid.
var app = angular.module('app', ['ui.bootstrap']); app.controller('modalinstancectrl', function($scope, $modalinstance, customer) { $scope.customer = customer; }); app.controller('customercontroller', function($scope, $timeout, $modal, $log) { $scope.customers = [{ name: 'movie title 1', details: 'http://image.tmdb.org/t/p/w342//lfssltlfozwpaglo31ooueirbgq.jpg', }, { name: 'movie title 2', details: 'http://image.tmdb.org/t/p/w342//tgfrdjs5pfw20aoh1orezuxw8cn.jpg', }, { name: 'movie title 3', details: 'http://image.tmdb.org/t/p/w342//wjxku1yhmkeuzynehux7xtaypse.jpg', }]; // modal window $scope.open = function(_customer) { var modalinstance = $modal.open({ controller: "modalinstancectrl", templateurl: 'mymodalcontent.html', resolve: { customer: function() { return _customer; } } }); }; });
i need able use restful api source:
$http.get("http://api.themoviedb.org/3/movie/now_playing?api_key=ebea8cfca72fdff8d2624ad7bbf78e4c") .success(function(response) { console.log(response); $scope.results = response.results; });
and enable click event trigger modal now, except needs grab details of each of items in json object , display in modal.
the ng-repeat
:
<div class="container"> <div class="row"> <div ng-repeat="items in results"> <img class="col-lg-3 col-md-3 col-sm-3 col-xs-12 thumbnail" ng-src="http://image.tmdb.org/t/p/w342/{{items.poster_path}}"> </div> </div> </div>
using fiddle: http://jsfiddle.net/8s9ss/224/ base, need have buttons replaced images coming through rest api , should trigger modal on click.
this should need
<div ng-repeat="items in results"> <a ng-click="open(items)" class="col-lg-3 col-md-3 col-sm-3 col-xs-12 thumbnail"> <img ng-if="items.poster_path" ng-src="http://image.tmdb.org/t/p/w342/{{items.poster_path}}"> <div class="caption" ng-hide="items.poster_path"> <h3>{{items.title}}</h3> </div> </a> </div>
you'll need tweak modal template show different properties should able figure out.
Comments
Post a Comment