Question

我使用ng重复显示图像，我希望它们与内联格式中使用其他所有其他我在div项目中使用的东西。问题是，我所做的一切都没有显示在内联中。

项目具有显示块属性。这是简单而压轴的html文件。

<!doctype html>
<html ng-app="countryApp">
<head>
 <script 
src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular.min.js">
</script>
 <script>
    var countryApp = angular.module('countryApp', []);
  countryApp.controller('CountryCtrl', function ($scope, $http){
    $http.get('countries.json').success(function(data) {
      $scope.countries = data;
    });
  });
</script>

</head>
<body>



      <div ng-controller="CountryCtrl" >

         <div class="item">
                <div ng-repeat="country in countries" class="w3l-movie-gride-agile w3l-movie-gride-agile1 owl-item">
                            <a href="single.php?myNumber={{country.vid}}" class="hvr-shutter-out-horizontal"><img ng-src="thumbnail/{{country.flagURL}}" title="album-name" class="img-responsive" alt=" ">
                                <div class="w3l-action-icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
                            </a>

                            <div class="mid-1 agileits_w3layouts_mid_1_home">
                                <div class="w3l-movie-text">
                                    <h6><a href="single.html">Citizen Soldier</a></h6>                          
                                </div>

                            <div class="mid-2 agile_mid_2_home">
                                <p>2016</p>
                                <div class="block-stars">
                                    <ul class="w3l-ratings">
                                        <li><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a></li>
                                        <li><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a></li>
                                        <li><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a></li>
                                        <li><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a></li>
                                        <li><a href="#"><i class="fa fa-star-half-o" aria-hidden="true"></i></a></li>
                                    </ul>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            </div>


                        <div class="ribben">
                            <p>NEW</p>
                        </div>
                </div>

        </div>
</div>

Answer 1

您放置ng-repeat的元素也会重复。因此，每次迭代都包含在常规<div>中。因此，除非您有一些适用于所有<div>元素的全局样式，否则它不会内联。

要解决这个问题，你基本上只需要将ng-repeat - 指令降低一级。像这样：

<div class="item">
    <div ng-repeat="country in countries" 
         class="w3l-movie-gride-agile w3l-movie-gride-agile1">

        // ... rest of content

    </div>
</div>

我认为应该这样做。

图像在ng-repeat中对齐水平

1 个答案: