15

私は非常に単純な Angular アプリを持っており、ng-class と組み合わせて ng-repeat を使用してテンプレートを繰り返し、バインドされているデータのプロパティの 1 つに応じて外側の div に別のクラスを適用しようとしています。

これは、単純なものを使用したときに機能しました...

ng-class="message.type"

...しかし残念ながら、メッセージ タイプの先頭に文字列を連結する必要があります。

ここでJSfiddleを作成しようとしました...

http://jsfiddle.net/XuYGN/5/

...しかし、JSfiddleも作成するのは初めての試みであり、Angularが実行されていないように見えるため、何か間違ったことをしているに違いありません。しかし、それは私が表現で何をしようとしているのかを示しています。

どんな助けでも本当に感謝します。

4

2 に答える 2

33

html : 

    <div ng-controller="mainCtrl">

        <div ng-repeat="message in data.messages" ng-class="'className-' + message.type">

            Repeat Me           

        </div>        

    </div>                

</div>

JavaScript :

var mainCtrl=function($scope) {

    $scope.data = {}

    $scope.data.messages = [
        {
            "type": "phone"},
        {
            "type": "email"},
        {
            "type": "meeting"},
        {
            "type": "note"}
    ]

} </p>

フィドルでは、式の周りにいくつかの {{}} を配置します。これは式であるため、実行しないでください。

于 2012-12-24T18:26:29.083 に答える
11

FYI, an alternative to what @camus answered:

class="{{'className-' + message.type}}"

When using class, the expression (inside {{}}s) must evaluate to a string of space-delimited class names.

When using ng-class, the expression must evaluate to one of the following:

  1. a string of space-delimited class names, or
  2. and array of class names, or
  3. a map/object of class names to boolean values.
于 2012-12-24T21:46:10.530 に答える