我想在我的主屏幕上显示图像阵列，但它不工作

Question

通过 angular 显示图像的代码在 tag.i 中使用 pic 控制器，该控制器的详细信息在 angular js 文件中。如果有人可以帮助我，请帮助我。

HTML 代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
     <link href="css/animate.css" rel="stylesheet">
</head>
<body ng-app="starter" >

  <ion-pane>   
    <div class="bar bar-header bar-dark">
      <button class="button button-icon icon ion-navicon"></button>
      <h1 class="title">AdsCafe</h1>
    </div> 
  </ion-pane>
    <div ng-controller="pic" >
      <ion-content>
         <img collection-repeat="photo in pic.photos"
         item-height="33%" item-width="33%"
         ng-src="{{photo}}">
      </ion-content>

    </div>

</body>
</html>

代码将 angular 数组设置为正确的控制器

ANGULAR JS代码

angular.module('starter', ['ionic'])
.controller('pic', function() {
  this.photos = ['../img/a.gif','../img/b.gif','../img/c.gif','../img/d.gif','../img/qw.gif'];

  ];


});

Answer 1

我看到这里有些错误。也许你可以按顺序试一试。

1) 在ng-controller中将pic更改为pic as pic（这是我看到的主要问题）
2) 在你的控制器中删除额外的 ];（可能只是你的代码片段中的拼写错误）
3) 检查浏览器控制台以查看图像 url 是否存在（尝试使用网络图像查看它是否有效）

<div ng-controller="pic as pic" >
    <ion-content>
       <img collection-repeat="photo in pic.photos"
       item-height="33%" item-width="33%"
       ng-src="{{photo}}">
    </ion-content>
</div>

angular.module('starter', ['ionic'])
.controller('pic', function() {
  this.photos = [
      'https://dummyimage.com/600x400/000/fff',
      'https://dummyimage.com/600x400/eee/fff',
      'https://dummyimage.com/600x400/aaa/fff'
  ];
});

我想在我的主屏幕上显示图像阵列，但它不工作

i want to display array of images on my main screen but it's not working

javascript

angularjs

ionic-framework

ionic-view