Question

实际上，我可以使用angularjs将3个图像（打开，新建和保存图标）加载到div中。现在，我试图将这些图像的相关文本放入同一个div中低于这3张图片。

像，＆＃34;开＆＃34;文字应写在＆＃34;打开＆＃34; image.Simialrly，对于剩下的图像也是如此。我怎么能实现这个目标？

任何人都可以帮我解决这个问题...

我的js代码：

angular.module('Sample', []).controller('Home', function($scope) {

    $scope.imageSources = [];
    $scope.imageSources.push('images/open.png');
    $scope.imageSources.push('images/new.jpg');
    $scope.imageSources.push('images/save.png');

});

我的HTML代码：

<div style="margin-top: 15px;">
                    <img width=40 height=50 style="margin-left: 12px;"
                        ng-repeat="imageSource in imageSources track by $index"
                        ng-src="{{imageSource}}"> </img>
                </div>

Answer 1

这可行，但不是正确的方法。我把造型留给你了。

查看：

  <div style="margin-top: 15px;" ng-repeat="imageSource in imageSources">
    <img width=40 height=50 style="margin-left: 12px;" ng-src="{{imageSource}}" />
    <br>
    <span style="margin-left: 12px;">{{getFilenameFromPath(imageSource)}}</span>
  </div>

控制器：

 $scope.imageSources = [];
  $scope.imageSources.push('images/open.png');
  $scope.imageSources.push('images/new.jpg');
  $scope.imageSources.push('images/save.png');


  $scope.getFilenameFromPath = function(filename) {
    return filename.split("/")[1].split(".")[0];
  }

这是jsfiddle。

内容中提到的正确方法是拥有一个对象集合，每个对象应该具有name和src属性。在你的情况下，你应该这样做：

$scope.imageSources = [];
  $scope.imageSources.push({
    name:"open",
    src: "images/open.png"
  });
  $scope.imageSources.push({
    name:"new",
    src: "images/new.png"
  });
  $scope.imageSources.push({
    name:"save",
    src: "images/save.png"
  });

所以你最终会得到这个系列：

[
  {
    "name": "open",
    "src": "images/open.png"
  },
  {
    "name": "new",
    "src": "images/new.png"
  },
  {
    "name": "save",
    "src": "images/save.png"
  }
]

这是jsfiddle。

如何使用angularjs将该图像的图像和文本并行加载到div中

1 个答案: