Question

我试图在点击按钮时显示图像列表。我创建了图像数组，它们应该重复并显示在页面上。我不知道错误在哪里，这是我的代码。

 <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 1

＆lt; p＆gt;您可以使用＆lt; code＆gt;＆lt; md-grid-list＆gt;＆lt; / code＆gt;和＆lt; code＆gt;＆lt; md-grid-tile＆gt;＆lt; / code＆gt;它以角材料定义。使用此功能，您可以为图像创建简单的图库视图。使用＆lt; code＆gt; $ mdDialog＆lt; / code＆gt;用于显示所选图像。＆lt; / p＆gt; ＆lt; p＆gt;＆lt; a href =＆＃34; https://material.angularjs.org/latest/demo/gridList" rel =＆＃34; nofollow noreferrer＆＃34;＆gt;网格列表＆lt; / a＆gt;＆lt; / p＆gt; ＆lt; p＆gt;＆lt; a href =＆＃34; https://rmaterial.angularjs.org/latest/api/service/$mdDialog" rel =＆＃34; nofollow noreferrer＆＃34;＆gt; $ mdDialog＆lt; / a＆gt;＆lt; / p＆gt;

Answer 2

在控制器中 -

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>

具有角度和角度材质的图像列表

2 个答案: