0

我希望能够设置background-image在.divng-repeat

我尝试使用在循环ng-class中将适当的类添加到适当的 div 中，ng-repeat但ng-class似乎只是过度编写了.tile我需要在那里的类。

另外，附带说明一下，当我使用 Google 开发工具查看我的 AngularJS 代码时，为什么我的所有代码都显示在我的源代码中？你可以看到那里的所有逻辑。这不可能是对的，不是吗？

在此处输入图像描述

如何在不覆盖 类以及在源代码中正确显示的情况下将正确的类ng-class添加到正确的div ？.tile

我的控制器在main.js

'use strict';

angular.module('mmApp')
  .controller('MainCtrl', function ($scope) {
    $scope.designTiles = [
      { bgImageClass : "best-show-premium", title : "Vance & Gary Unhinged", use : "Album Art" },
      { bgImageClass : "dam-funk", title : "Dam-Funk", use : "Logo" },
      { bgImageClass : "lemy-leopard-soh", title : "Lemy Leopard : Streets of House", use : "Album Art" },
      { bgImageClass : "culture-blind", title : "Max Mythic : Culture Blind", use : "Album Art" },
      { bgImageClass : "future-shock-logo", title : "Future Shock Logo", use : "Logo" },
      { bgImageClass : "fame-logo", title : "F.A.M.E. Logo", use : "Logo" },
      { bgImageClass : "lounge-coffee", title : "Loung Coffee", use : "Album Art" },
      { bgImageClass : "engine-yard-tshirt", title : "Engine Yard T-Shirt", use : "T-shirt Design" },
    ];
  });

我的design.html看法

<section ng-controller="MainCtrl" class="ng-class: {tile.bgImageClass:true};" class="main">
  <div ng-repeat="tile in designTiles" class="tile">
    <h3 class="tile_title">{{tile.title}}</h3>
    <h4 class="tile_use">{{tile.use}}</h4>
  </div>
</section>

更新

我添加了 sh0ber 建议的更改。这是我的新design.html观点

<section ng-controller="MainCtrl" class="main">
  <a ng-repeat="tile in designTiles" ng-href="{{tile.url}}" ng-class="['tile', tile.bgImageClass]">
    <h3 class="tile_title">{{tile.title}}</h3>
    <h4 class="tile_use">{{tile.use}}</h4>
  </a>
</section>

但这实际上并不适用tile.bgImageClass于<a>元素。这是我在开发人员工具中看到的

在此处输入图像描述

如果我们看一下<a>我们看到的第一个

<a ng-repeat="tile in designTiles" ng-href="#/design/vance-and-gary-unhinged" ng-class="['tile', 'tile.bgImageClass']" class="ng-scope tile tile.bgImageClass" href="#/design/vance-and-gary-unhinged">
    <h3 class="tile_title ng-binding">Vance &amp; Gary Unhinged</h3>
    <h4 class="tile_use ng-binding">Album Art</h4>
</a>

在查看应用的类时，我们看到

class="ng-scope tile tile.bgImageClass"

对于这个特定的<a>，我们应该看到

class="ng-scope tile vance-and-gary-unhinged"

该.vance-and-gary-unhinged课程未在 之后立即应用.tile。为什么 tile.bgImageClass被安置在那里？AngularJS 似乎没有获取类。我究竟做错了什么？

4

2 回答 2

1

您可以将绑定放在普通的类属性中：

<section ng-controller="MainCtrl" class="main">
  <div ng-repeat="tile in designTiles" class="tile {{tile.bgImageClass}}">
    <h3 class="tile_title">{{tile.title}}</h3>
    <h4 class="tile_use">{{tile.use}}</h4>
  </div>
</section>

Here's a demo以上在行动。

于 2013-06-08T08:03:18.633 回答
0

来自AngularJSng-class文档：

评估的结果可以是表示以空格分隔的类名的字符串、数组或类名到布尔值的映射。

在这里，我使用了属性指令并创建了一个类数组。该数组包含两个类：一个用于由bgImageClass属性指定的类名，另一个用于tile该类的字符串文字“tile”。

<section ng-controller="MainCtrl" class="main">
  <div ng-repeat="tile in designTiles" ng-class="[tile.bgImageClass, 'tile']">
      <h3 class="tile_title">{{tile.title}}</h3>
      <h4 class="tile_use">{{tile.use}}</h4>
  </div>
</section>
于 2013-06-08T02:26:46.287 回答