frontendgirl frontendgirl - 1 month ago 21
AngularJS Question

List of images with Angular and Angular Material

I am trying to make a list of images appear when clicked on a button. I have created image array, and they should repeat and show on the page. I don't know where is the error, here is my code.

<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";
}
]};

Answer

In controller -

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>