0

ボタンをクリックすると画像の一覧を表示しようとしています。私は画像配列を作成し、それらを繰り返してページに表示する必要があります。私はどこにエラーがあるのか​​分からない、ここに私のコードです。コントローラで角度と角度のある材質の画像一覧

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

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> 
+0

コードがまだ動作しません、それはページ全体を台無しに確認してください。配列を削除するとページが読み込まれますが、イメージはありません。 – frontendgirl

+0

あなたの一日を作ることを望むこのデモ - http://plnkr.co/edit/TboyET?p=preview –

+0

なぜあなたはdownvoteを与える! –

1

あなたはそれが角度の材料に定義されて<md-grid-list><md-grid-tile>を使用することができます。これを使用すると、画像の簡単なギャラリービューを作成できます。選択した画像を表示するには$mdDialogを使用してください。

Grid List

$mdDialog

関連する問題