Как складывать изображения, используя ng-repeat в виде галереи? - PullRequest
Новая
       3

Как складывать изображения, используя ng-repeat в виде галереи?

0 голосов
/ 22 мая 2018

Я пытаюсь сделать галерею.Я пытаюсь показать изображение в галерее с помощью ng-repeat.

Изображения загружаются, однако они загружаются линейно (как я использовал список), но я хочу, чтобы они загружались в сетке.Три изображения в строке.

Можно ли создать что-то подобное 

<ul ng-repeat = "x in dogObj">

    <div class ="row">
        <div class ="col-lg-4">
            <li class ="list-group-item" text-align><img src="{{x.src}}" height="350" width = "400"></li>
        </div>  
    </div>

</ul>

Файл json встроен в контроллер 

app.controller("myCtrl", 

    function($scope)  
    {
       $scope.dogObj =    [{"actual_name":"dog1","shown_name":"dog1","src":"images/dog1.jpg"},
                          {"actual_name":"dog2","shown_name":"dog2","src":"images/dog2.jpg"},
                           {"actual_name":"dog3","shown_name":"dog3","src":"images/dog3.jpg"},
                           {"actual_name":"dog7","shown_name":"dog7","src":"images/dog7.jpg"},
                           {"actual_name":"dog4","shown_name":"dog4","src":"images/dog4.jpg"},
                           {"actual_name":"dog5","shown_name":"dog5","src":"images/dog5.jpg"},
                           {"actual_name":"dog6","shown_name":"dog6","src":"images/dog6.jpg"},
                           {"actual_name":"dog8","shown_name":"dog8","src":"images/dog8.jpg"}];});

Я поместил изображение вJSON файл.Как мне этого добиться?

Ответы [ 3 ]

0 голосов
/ 22 мая 2018

1- Использование тега li в качестве прямого потомка тега ul является хорошей практикой.

2- Ваш итератор (ng-repeat)Я думаю, должен использоваться в теге li, а не в теге ul.

3- Вы можете вместо использования src="{{}}" использовать директиву ng-src="".

Я думаю, что этот код - ваш ответ 

<ul class="row">
  <li class="col-lg-4" ng-repeat="x in dogObj">

    <div class="list-group-item" text-align>
      <img ng-src="x.src" height="350" width="400">
    </div>

  </li>
</ul>
0 голосов
/ 22 мая 2018

Привет, используйте этот код, он работает на 100% 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <div class="row">
        <div ng-repeat = "x in dogObj">
            <div class ="col-lg-4">
                <img src="{{x.src}}">
            </div>
        </div>
    </div>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.dogObj =    [{"actual_name":"dog1","shown_name":"dog1","src":"images/dog1.jpg"},
            {"actual_name":"dog2","shown_name":"dog2","src":"images/dog2.jpg"},
            {"actual_name":"dog3","shown_name":"dog3","src":"images/dog3.jpg"},
            {"actual_name":"dog7","shown_name":"dog7","src":"images/dog7.jpg"},
            {"actual_name":"dog4","shown_name":"dog4","src":"images/dog4.jpg"},
            {"actual_name":"dog5","shown_name":"dog5","src":"images/dog5.jpg"},
            {"actual_name":"dog6","shown_name":"dog6","src":"images/dog6.jpg"},
            {"actual_name":"dog8","shown_name":"dog8","src":"images/dog8.jpg"}];});
</script>
</body>
</html>
0 голосов
/ 22 мая 2018

Обычно вы выполняете итерации по строке, что-то вроде этого: 

<div class="row" ng-repeat = "x in dogObj">
    <div class ="col-lg-4">
        <img src="{{x.src}}" height="350" width = "400"></li>
    </div>
</div>

В вашем примере создается плохо сформированный html (проверьте соотношение элементов ul и li).Как выглядит JSON?Вы также получите проблему с размерами изображений в адаптивном макете.

ng-repeat не обеспечивает много логики (что хорошо, вам не нужно слишком много логики в вашемПосмотреть).Если вам нужно 3 изображения в строке, вам придется расположить данные в три раза, например 

data = [ [ dogObj, dogObj, dogObj ] , ... ]

, затем выполнить итерацию по списку и создать одну строку каждого триплета, как показано выше.Проще, но не так чисто: вы также можете визуализировать все изображения в одной строке и полагаться на адаптивный макет для рендеринга многих строк, используя правильный класс CSS 

...
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><img ...
...

, который, по сути, говорит браузеру отображать 3 столбца независимо отРазмер экрана.Строка будет разбита на следующую строку.Тем не менее размеры изображения сломают это.bootstrap предоставляет класс .img-отзывчивый, который может помочь.Ознакомьтесь с документацией по сеточной системе и с img-responseive на www.getbootstrap.com

В любом случае, лучшим вариантом может быть показ меньше столбцов, если размер экрана становится слишком маленьким, и больше, если экран действительно большой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...