Using RESTful source instead of static JSON in AngularJS -


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.

http://jsfiddle.net/8s9ss/229/


Comments