Список изображений с угловым и угловым материалом

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

<body ng-app="StarterApp" ng-controller="AppCtrl" layout="column" > 
    <md-content id="content"flex> 
    <h2>{{title}}</h2> 
    <p>{{content}}</p>  
    <img ng-src="{{image}}"/> 
     <div ng-repeat="pic in pics"> 
     <img src="{{pic}}"/> 
     </div>   
</md-content> 
</body>

App.js

var app=angular.module('StarterApp', ['ngMaterial']); 
app.controller('AppCtrl',['$scope', '$mdSidenav',function($scope,$mdSidenav) { 
    $scope.openGallery=function(){ 
    $scope.title="Our work so far"; 
    $scope.content=""; 
    $scope.image="";  
    $scope.pictures=pics; 
    var pics=[ 
    { 
     url: "svg/camera.png"; 
    },{ 
     url: "svg/email.png"; 
    },{ 
     url: "svg/person.png"; 
    } 
    ]};

источник

2016-10-15 frontendgirl

Проверьте answerr – Sajeetharan

-1

В контроллере -

var pics=[ 
     { 
      url: "svg/camera.png"; 
     },{ 
      url: "svg/email.png"; 
     },{ 
      url: "svg/person.png"; 
     } 
    $scope.pictures=pics;

HTML:

<div ng-repeat="pic in pictures"> 
    <img src="{{pic.url}}"/> 
    </div>

источник

2016-10-15 16:03:53

код по-прежнему не работает, оно портит всю страницу. Страница загружается, когда я удаляю массив, но потом у меня нет изображений. – frontendgirl

Надеюсь, что эта демонстрация сделает ваш день - http://plnkr.co/edit/TboyET?p=preview –

Почему вы даете нисходящее направление! –

Вы можете использовать <md-grid-list> и <md-grid-tile> она определяется в угловом материала. С его помощью вы можете создать простой просмотр галереи изображений. Используйте $mdDialog для показа выбранного изображения.

Grid List

$mdDialog

источник

2017-07-11 05:30:36

Список изображений с угловым и угловым материалом

ответ

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