Question

情境：使用Rails应用程序和AngularJS中的$ http.get从Edmunds.com MEDIA API中提取照片。

任务尝试完成： ng-repeat通过车辆照片。

条件：我成功获得了响应，并且能够加载一个图像，但是如何让它在照片阵列中重复并完成所有图像。

对于不清楚的解释道歉，以及任何帮助表示赞赏。

的index.html：

   <h1> Wheel Tire Family </h1>
   <!--  CAR IMAGES  -->
   <div ng-init="carImages">

     <img src="https://media.ed.edmunds-media.com/{{carImages}}">

   </div>

catalog_controller.js：

$scope.photos = {};
$scope.carImages = {};

//GET the edmunds media api for the
//Make Model Year photos

$http.get("https://api.edmunds.com/api/media/v2/audi/a3/2015/photos?title=&category=exterior&provider=oem&width=1280&shottype=S&pagenum=1&pagesize=10&view=basic&api_key=api_key&fmt=json")
    .success(function (data) {
        var photos = data;
        console.log(photos);
        $scope.carImages = photos.photos[0].sources[0].link.href;
        console.log($scope.carImages);
        });

Answer 1

也许是这样的？

<强>角

.success(function (data) {
    $scope.carImages = data.photos;
});

html

<div ng-repeat="carImage in carImages">
    <img ng-src="https://media.ed.edmunds-media.com/{{carImage.sources[0].link.href}}">
</div>

这应该遍历图像并选择第一个“源”链接。还建议您使用ng-src而不是src。

Answer 2

我在Jquery中为你提供了一些有用的代码，这可能有助于解决角度js。

To get all Vehicle Details (New, Used, Future) using Jquery , Use the below code.

     <!--Form Details to display year/make/model in dropdown -->
     <form method="POST" action="one123.php">
   <select id="ajYears" name="ajYears">
    </select>
     <select id="ajMakes" name="makes" disabled="disabled">
        <option>Select Make</option>
    </select>
    <select id="ajModels" name="models" disabled="disabled">
        <option>Select Model</option>
    </select>
    <select id="ajStyles" name="styles" disabled="disabled">
        <option>Select Trim</option>
    </select>
    <input type="submit" value="submit">
   </form>

     <!--Script to fetch details from API-->
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script>
 jQuery.noConflict();
     </script>

      <!-- js code -->
       <script>
   var protoCall = "https://";
     var host = "api.edmunds.com";

    // Make sure to change the API KEY
var apiKey = "API KEY";
var fmt = "json";
var standardParams = "&fmt=" + fmt +  "&api_key=" + apiKey + "&callback=?";
var $yearSelect = jQuery('#ajYears');
var $makeSelect = jQuery('#ajMakes');
var $modelSelect = jQuery('#ajModels');
var $styleSelect = jQuery('#ajStyles');

// lets bind some events on document.ready.
jQuery(function(){

    $yearSelect.on('change', function() { getMakeModelsByYear()});
    $makeSelect.on('change', function() { enableModelDropdown() });
    $modelSelect.on('change', function() { getStyles() });

    // lets build the year drop down.
    ajEdmundsBuildYear();

});

// method to build the year drop down.
function ajEdmundsBuildYear()
{
    var baseYear = 1990,
        endYear = new Date().getFullYear();
    $yearSelect.empty();
    $yearSelect.append('<option value="-1">Select Year</option>');
    for(var yyyy=baseYear; yyyy<=endYear; yyyy++)
    {
        $yearSelect.append('<option value="' + yyyy + '">' + yyyy +'</option>');   
    }
}

// get the makes and models for a year in one go...
function getMakeModelsByYear()
{
    var year = $yearSelect.val(),
        endPoint = "/api/vehicle/v2/makes",
        view = "basic",
        options = "year=" + year + "&view=" + view + standardParams,
        postURL = protoCall + host + endPoint + "?" + options;
    jQuery.getJSON(postURL,
        function(data) {
             // clear the make drop down... re add the first option... remove dsiabled attr.
             $makeSelect.empty();
             $makeSelect.append('<option value="-1">Select Make</option>');
             $makeSelect.removeAttr('disabled');
             $modelSelect.empty();
             $modelSelect.append('<option value="-1">Select Model</option>');

             // loop the makes... each make contains model... add the make in make drop down and models in model dd
             jQuery.each(data.makes, function(i, val) {
                  make = data.makes[i];
                  $makeSelect.append('<option value="' + make.niceName + '">' + make.name + '</option>');
                  jQuery.each(make.models, function(x, val){   
                       model = make.models[x];
                       $modelSelect.append('<option make="' + make.niceName +'" value="' + model.niceName + '">' + model.name + '</option>');                 
                  });
             });
        });
}

// since we already grabed the models...
// now just matter of showing only the matching models for a make.
function enableModelDropdown()
{
    var make =  $makeSelect.val();
    $modelSelect.removeAttr('disabled');
    $modelSelect.find('option').not('[value="-1"]').hide();
    $modelSelect.find('option[make=' + make + ']').show();

}

// grab the styles... pretty much same as
// getMakeModelsByYear()
function getStyles()
{
    var year = $yearSelect.val(),
        make = $makeSelect.val(),
        model = $modelSelect.val(),
        endPoint = "/api/vehicle/v2/" + make + "/" + model + "/" + year + "/styles",
        view = "basic",
        options = "view=" + view + standardParams,
        postURL = protoCall + host + endPoint + "?" +  options;
    jQuery.getJSON(postURL,
        function(data) {
             $styleSelect.empty();
             $styleSelect.removeAttr('disabled');
             $styleSelect.append('<option value="-1">Select Style</option>');
             jQuery.each(data.styles, function(i, val) {
                  style = data.styles[i];
                  $styleSelect.append("<option value='" + style.id + "'>" + style.name + "</option>");
             });
        });
}

AngularJS和Edmunds Media API用于提取车辆图像

2 个答案: