Получить изображения из json с помощью $ http, получить только первый

Это файл 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>

если я ставлю только {{}} item.images я вернусь мне [ "..linktoimage"], и мне нужно удалить скобки и кавычки

См код съязвил здесь

источник

2016-06-19 Jovan Poplasen

Отформатируйте ваш вопрос. его невозможно ничего понять –

проблема в том вы присваиваете массив (с помощью только одного элемента) в ГКЗ в фотошопе, а не передавая фактическую строку IMG URL-адрес, так что подправить этот бит, оно должно быть исправлено:

<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 man it works! Вы можете просто объяснить мне, что вы только что сделали? : D –

Добро пожаловать! Когда вы используете {{item.images | limitTo: 1}} результат будет иметь тип Array с одним элементом. Поэтому, когда он используется как строка (в данном случае это изображение src), он строит массив, а не нужный элемент. То, что я сделал, просто проверяет, имеет ли item.images хотя бы 1 элемент, и если это так, возвратите item.images [0], который является первым элементом в item.images array.otherwise, он возвращает пустую строку. Добавление этого условия заключается в том, чтобы избежать ошибок, когда item.images пуст. – akazemis

Могу я спросить вас еще об одном? У меня есть борьба со звездами в этом же проекте. В Json у меня есть число звезд 2,3 .... И как преобразовать его в unicode & # 9733, а не быть числом, чтобы получить только 2 или 3 символа unuicode? –

Определить этот метод в контроллере:

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

затем использовать его в HTML:

{{getReplacedStars(item.stars)}}

источник

2016-06-20 06:35:21 akazemis

Получить изображения из json с помощью $ http, получить только первый

ответ

Смежные вопросы