$ httpでjsonから画像を取得するには、最初に1つだけを取得します

これはjsファイルです。どのように画像セクションにアクセスし、最初にhtmlで表示できますか？

var Test = angular.module('test', []); 
 

 
Test.controller('hotelsController', ['$scope', '$http', function($scope, $http) { 
 

 
    var images; 
 

 
    $scope.getHotels = function() { 
 
    $http.get('http://fake-hotel-api.herokuapp.com/api/hotels') 
 
     .success(function(data) { 
 
     $scope.hotels = data; 
 
     images = data[0].images; 
 
     console.log(angular.fromJson(images)); 
 
     }) 
 
     .error(function(data) { 
 
     $scope.hotels = "Response failed"; 
 
     }); 
 
    } 
 
}]); 
 

 
<p>This is the css of the tests</p>

h1 { 
 
    text-align: center; 
 
    margin-bottom: 50px 
 
} 
 

 
.container { 
 
    width: 1630px; 
 
    margin: 0 auto 
 
} 
 

 
body { 
 
    font-family: Open Sans, sans-serif; 
 
    color: #000 
 
} 
 

 
.btn-grey { 
 
    background: #e5e5e5; 
 
    width: 320px; 
 
    text-align: center; 
 
    height: 50px; 
 
    line-height: 47px; 
 
    border-radius: 5px; 
 
    color: #323232; 
 
    font-size: 26px; 
 
    display: inline-block; 
 
    border: 1px solid #979797 
 
} 
 

 
.btn-grey:hover { 
 
    color: #323232; 
 
    background: #ccc 
 
} 
 

 
.hotels .hotel { 
 
    height: 480px; 
 
    width: 100%; 
 
    margin-top: 115px; 
 
    border: 1px solid #979797; 
 
    border-radius: 5px; 
 
    margin-bottom: 48px 
 
} 
 

 
.hotels .hotel .hotel-image { 
 
    width: 654px; 
 
    border-right: 1px solid #979797; 
 
    float: left; 
 
    background: #e5e5e5; 
 
    height: 478px 
 
} 
 

 
.hotels .hotel .hotel-image img { 
 
    height: 478px 
 
} 
 

 
.hotels .hotel .hotel-description { 
 
    width: calc(100% - 655px); 
 
    float: left; 
 
    padding: 0 35px; 
 
    background: #f6f6f6; 
 
    position: relative; 
 
    height: 478px 
 
} 
 

 
.hotels .hotel .hotel-description .hotel-stars { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 20px 
 
} 
 

 
.hotels .hotel .hotel-description h2 { 
 
    font-size: 42px; 
 
    font-weight: 600; 
 
    color: #000; 
 
    margin: 35px 0 20px 
 
} 
 

 
.hotels .hotel .hotel-description h3 { 
 
    font-size: 24px; 
 
    font-weight: 300; 
 
    margin: 0 0 50px 
 
} 
 

 
.hotels .hotel .hotel-description p { 
 
    font-size: 22px; 
 
    line-height: 26px; 
 
    margin-bottom: 50px; 
 
    height: 78px; 
 
    overflow: hidden 
 
} 
 

 
.hotels .hotel .hotel-description .hotel-price { 
 
    float: right; 
 
    font-size: 60px; 
 
    color: #323232; 
 
    text-align: right 
 
} 
 

 
.hotels .hotel .hotel-description .hotel-price .date { 
 
    display: block; 
 
    font-size: 24px; 
 
    font-weight: 300 
 
} 
 

 
<p>This is the html of the file</p>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="test"> 
 
    <h1>Test</h1> 
 

 
    <div class="container" ng-controller="hotelsController"> 
 
    <center><a href="javascript:void(0)" ng-click="getHotels()" class="btn-grey">Load Hotels</a></center> 
 
    <div class="hotels" ng-cloak> 
 
     <div class="hotel clearfix" ng-repeat="item in hotels | limitTo:5"> 
 
     <div class="hotel-image"> 
 
      <img ng-src="{{item.images | limitTo:1}}" alt=""> 
 
     </div> 
 
     <div class="hotel-description"> 
 
      <div class="hotel-stars"> 
 
      {{item.stars}} &#9733; 
 
      </div> 
 
      <h2>{{item.name}}</h2> 
 
      <h3>{{item.city}} - {{item.country}}</h3> 
 
      <p> 
 
      {{item.description}} 
 
      </p> 
 
      <a href="#" class="btn-grey">Show Reviews</a> 
 
      <div class="hotel-price"> 
 
      {{item.price}} &euro; 
 
      <span class="date"> 
 
           {{item.date_start | date}} - {{item.date_end | date}} 
 
          </span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</body>

私は[ "..linktoimage"]私を返します{} {item.images}のみを入れて、私は括弧と引用符

参照してくださいコードを削除する必要がある場合sniped here

出典

2016-06-19 Jovan Poplasen

あなたの質問をフォーマットしてください。その何も理解することは不可能 –

実際のimg url文字列を渡すのではなく、imgのsrcに配列（1つの項目のみ）を割り当てているので、このビットを微調整する必要があります。

<div class="hotel clearfix" ng-repeat="item in hotels | limitTo:5"> 
     <div class="hotel-image"> 
      <img ng-src="{{(item.images.length>0?item.images[0]:'')}}" alt=""> 
     </div> 
...

出典

2016-06-19 23:53:10 akazemis

それは働くThx男！あなたはちょうど何をやったのですか？：D –

あなたは大歓迎です！あなたが{{item.images | limitTo：1}}結果は、要素が1つしかない配列型になります。したがって、文字列（この場合はイメージsrc）として使用されているときは、配列をあなたの望む要素ではなく文字列にします。私がしたのは、item.imagesが少なくとも1要素を持っているかどうかを調べて、item.images [0]がitem.images配列の最初の要素である場合に返します。それ以外の場合は、空の文字列を返します。この条件を追加するのは、item.imagesが空の場合のエラーを避けるためです。 – akazemis

もう1つ質問できますか？私はこの同じプロジェクトで星と戦っている。 Jsonでは、私は星数2,3を持っています....そして、それをunicodeで変換する方法と、2〜3のunuicode文字を得るための数字ではない方法はありますか？ –

コントローラ内でこのメソッドを定義します。

$scope.getReplacedStars = function(input) 
     { 
      return input.replace(/\*/g, '\u2605'); 
     }

その後、HTMLでそれを使用します。

{{getReplacedStars(item.stars)}}

出典

2016-06-20 06:35:21 akazemis

$ httpでjsonから画像を取得するには、最初に1つだけを取得します

答えて

関連する問題