Question

我有以下代码在网格中显示静态JSON对象。

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

我需要能够使用这个RESTful API源：

$http.get("http://api.themoviedb.org/3/movie/now_playing?api_key=ebea8cfca72fdff8d2624ad7bbf78e4c")
    .success(function(response) {
      console.log(response);
      $scope.results = response.results;
    });

并启用click事件以像现在一样触发模态，除了它需要获取JSON对象中每个项目的详细信息并显示在模态中。

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>

使用这个小提琴：http://jsfiddle.net/8s9ss/224/作为基础，我需要将按钮替换为来自REST API的图像，并且它们应该在点击时触发模态。

Answer 1

这应该是您所需要的一切

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

您需要调整模态模板以显示不同的属性，但您应该能够弄明白。

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

在AngularJS中使用RESTful源代替静态JSON

1 个答案: