0

中に作成されるbackground-imageそれぞれのプロパティを設定できるようにしたいと思います。divng-repeat

ループng-class内の適切な div に適切なクラスを追加するために使用しようとしましたが、そこに必要なクラスを書きすぎているようです。ng-repeatng-class.tile

また、補足として、Google Dev Tools でソースを表示すると、すべての AngularJS コードがソースに表示されるのはなぜですか? そこにすべてのロジックが表示されます。そんなはずないですよね？

ここに画像の説明を入力

クラスを上書きし たり、ソースに適切に表示したりせずに、適切なクラスを適切なdivng-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見解

<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

AngularJSドキュメントから:ng-class

評価の結果は、スペースで区切られたクラス名を表す文字列、配列、またはクラス名からブール値へのマップになります。

ここでは、attribute ディレクティブを使用して、クラスの配列を作成しています。配列には 2 つのクラスが含まれます。1 つはプロパティで指定されたクラス名用で、もう 1 つはクラス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 に答える