Question

我需要在每个网格框中插入特定图像。原始示例使用svg图像数据库，但我需要为网格的每个框插入一个不同的PNG图像。我的图片来自下一条路线：“。img / nuevas / imageexample.png”

以下是代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> ANGULAR </title> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">

    <style type="text/css">
      .gridListdemoDynamicTiles md-icon {
  width: 50%;
  height: 30%;
  background-color: grey;
  background-image: url("./img/nuevas/caja1.png");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
   }

.gridListdemoDynamicTiles md-icon svg {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.gridListdemoDynamicTiles .s64 {
  font-size: 64px; }

.gridListdemoDynamicTiles .s32 {
  font-size: 48px; }

.gridListdemoDynamicTiles md-icon.fa {
  display: block;
  padding-left: 0; }

.gridListdemoDynamicTiles md-icon.s32 span {
  padding-left: 8px; }

.gridListdemoDynamicTiles md-grid-list {
  margin: 8px; }

.gridListdemoDynamicTiles .gray {
  background: #f5f5f5; }

.gridListdemoDynamicTiles .green {
  background: #b9f6ca; }

.gridListdemoDynamicTiles .yellow {
  background: #ffff8d; }

.gridListdemoDynamicTiles .blue {
  background: #84ffff; }

.gridListdemoDynamicTiles .darkBlue {
  background: #80d8ff; }

.gridListdemoDynamicTiles .deepBlue {
  background: #448aff; }

.gridListdemoDynamicTiles .purple {
  background: #b388ff; }

.gridListdemoDynamicTiles .lightPurple {
  background: #8c9eff; }

.gridListdemoDynamicTiles .red {
  background: #ff8a80; }

.gridListdemoDynamicTiles .pink {
  background: #ff80ab; }

.gridListdemoDynamicTiles md-grid-tile {
  transition: all 300ms ease-out 50ms; }

.gridListdemoDynamicTiles md-grid-tile md-icon {
  padding-bottom: 32px; }

.gridListdemoDynamicTiles md-grid-tile md-grid-tile-footer {
  background: rgba(0, 0, 0, 0.68);
  height: 36px; }

.gridListdemoDynamicTiles md-grid-tile-footer figcaption {
  width: 100%; }

.gridListdemoDynamicTiles md-grid-tile-footer figcaption h3 {
  margin: 0;
  font-weight: 700;
  width: 100%;
  text-align: center; }
    </style>
</head>

<body ng-app="MyApp">




<div ng-controller="gridListDemoCtrl as vm" flex="" ng-cloak="" class="gridListdemoDynamicTiles">
  <md-grid-list md-cols="1" md-cols-sm="2" md-cols-md="3" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px" md-gutter-gt-sm="4px">

    <md-grid-tile ng-repeat="tile in vm.tiles" md-rowspan="{{tile.span.row}}" md-colspan="{{tile.span.col}}" md-colspan-sm="1" md-colspan-xs="1" ng-class="tile.background">
      <md-icon md-svg-src="{{tile.cajas}}"></md-icon>
      <md-grid-tile-footer><h3>{{tile.title}}</h3></md-grid-tile-footer>
    </md-grid-tile>
  </md-grid-list>
</div>

<!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

<!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>


<script>
angular
  .module('MyApp',['ngMaterial', 'ngMessages'])
  .controller('gridListDemoCtrl', function($scope) {

    this.tiles = buildGridModel({
            cajas : "av:svg-",
            title: "Producto",
            background: ""
          });

    function buildGridModel(tileTmpl){
      var it, results = [ ];

      for (var j=0; j<11; j++) {

        it = angular.extend({},tileTmpl);
        it.cajas  = it.cajas + (j+1);
        it.title = it.title + (j+1);
        it.span  = { row : 1, col : 1 };

        switch(j+1) {
          case 1:
            it.background = "red";
            it.span.row = it.span.col = 2;
            break;

          case 2: it.background = "green";         break;
          case 3: it.background = "darkBlue";      break;
          case 4:
            it.background = "blue";
            it.span.col = 2;
            break;

          case 5:
            it.background = "yellow";
            it.span.row = it.span.col = 2;
            break;

          case 6: it.background = "pink";          break;
          case 7: it.background = "darkBlue";      break;
          case 8: it.background = "purple";        break;
          case 9: it.background = "deepBlue";      break;
          case 10: it.background = "lightPurple";  break;
          case 11: it.background = "yellow";       break;
        }

        results.push(it);
      }
      return results;
    }
  })
  .config( function( $mdIconProvider ){
      $mdIconProvider.iconSet("av", './img/nuevas/caja1.png', 128);
    });

</script>


<!-- ______________SETELLAR JS _________________________ -->
<script type="text/javascript">
  $(window).stellar({
    horizontalScrolling: false,
    responsive: true
});
</script>


</section>

</body>




</html>

Answer 1

Angular Material使用md-icon标签，但事实上，它只是网格图块的内容。

如果您想在其中放置图片，只需使用img标记，它就会显示您的图片。

你可以这样做：

<md-grid-tile ng-repeat="tile in vm.tiles" md-rowspan="{{tile.span.row}}" md-colspan="{{tile.span.col}}" md-colspan-sm="1" md-colspan-xs="1" ng-class="tile.background">
  <img src=".img/nuevas/{{imgname}}" />
  <md-grid-tile-footer><h3>{{tile.title}}</h3></md-grid-tile-footer>
</md-grid-tile>

imgname是图片的名称+扩展名。

读取并插入带有ANGULARJS网格的图像。

1 个答案: