Question

我有10个图像我需要显示在上面的两行5和底部的5中，我试过这样它将它们显示为两行但是ng点击不正常。

<div  class="row" ng-repeat="image in images" ng-if="$index % 5 === 0" id="categorgrid">
        <div class="col col-20" ng-if="$index < images.length" ng-click="categoryclick(images[$index].src)">
            <img ng-src="{{images[$index].src}}" width="100%" />
        </div>
        <div class="col col-20" ng-if="$index + 1 < images.length" ng-click="categoryclick(images[$index].src)">
            <img ng-src="{{images[$index + 1].src}}" width="100%" />
        </div>
        <div class="col col-20" ng-if="$index + 2 < images.length" ng-click="categoryclick(images[$index].src)">
            <img ng-src="{{images[$index + 2].src}}" width="100%" />
        </div>
        <div class="col col-20" ng-if="$index + 3 < images.length" ng-click="categoryclick(images[$index].src)">
            <img ng-src="{{images[$index + 3].src}}" width="100%" />
        </div>
        <div class="col col-20" ng-if="$index + 4 < images.length" ng-click="categoryclick(images[$index].src)">
            <img ng-src="{{images[$index + 4].src}}" width="100%" />
        </div>
    </div>

Answer 1

AngularJS 1.4支持名为limitTo的过滤器。您可以将它传输到转发器并获得所需的输出。以下是plunker

中的示例

<body ng-app="limitToExample">
  <script>
  angular.module('limitToExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.numbers = [1,2,3,4,5,6,7,8,9];
    }]);
</script>
<div ng-controller="ExampleController">
  <div ng-repeat="number in numbers | limitTo: 5:0">Meow {{number}}</div>
</div>
</body>

如何在行中显示图像？

1 个答案: