Question

这是js文件，如何才能访问图像部分并仅在html中首先显示？

＆＃13;

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>

＆＃13;

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>

＆＃13;

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

＆＃13;

如果我只放{{item.images}}我将返回[＆＃34; .. linktoimage＆＃34;]并且我需要删除括号和引号

请参阅此处的代码

Answer 1

问题是你要将一个数组（只有一个项目）分配给img的src而不是传递实际的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>
...

Answer 2

在控制器中定义此方法：

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

然后在HTML中使用它：

{{getReplacedStars(item.stars)}}

使用$ http从json获取图像，只获得第一个

2 个答案: