如何使用ng Repeat和ng Class在每个DIV上动态设置背景图像？

Question

我希望能够设置background-image期间创建的每个div的{​​{1}}属性。

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

另外，在旁注中，当我使用Google Dev Tools查看时，为什么我的所有AngularJS代码都显示在我的源代码中？你可以看到那里的所有逻辑。那可能是对的，可以吗？

如何让.tile将正确的类添加到正确的 div ，而不会覆盖ng-class类并显示在源中正确吗？

.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

---

---

---

更新

我添加了sh0ber建议的更改。这是我的新<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> 视图

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被放在那里？似乎AngularJS没有提取类。我做错了什么？

Answer 1

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

<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 以上的行动。

Answer 2

来自AngularJS ng-class doc:

  

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

这里我使用属性指令并创建一个类数组。该数组包含两个类：一个用于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>