gpt4 book ai didi

javascript - 具有 Angular 和 Angular Material 的图像列表

转载 作者:行者123 更新时间:2023-12-03 05:53:02 24 4
gpt4 key购买 nike

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

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

最佳答案

您可以使用<md-grid-list><md-grid-tile>它是在 Angular Material 中定义的。使用它,您可以为图像创建简单的图库 View 。使用$mdDialog用于显示选定的图像。

Grid List

$mdDialog

关于javascript - 具有 Angular 和 Angular Material 的图像列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40061196/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com