l'expression à l'intérieur de ng-classe

J'ai une question très simple Angulaire App et je suis en train d'utiliser ng-repeat en conjonction avec ng-classe de répéter un modèle, puis d'appliquer une classe différente à l'extérieur div selon l'une des propriétés des données lié.

cela a fonctionné quand j'ai utilisé une simple...

ng-class="message.type"

...mais malheureusement, j'ai besoin de concaténer une chaîne au début du type de message.

J'ai essayé de créer un JSfiddle ici...

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

... mais c'est ma première tentative de faire un JSfiddle trop et je dois être en train de faire quelque chose de mal, parce que l'angle de choses ne semble pas être en cours d'exécution. Il montre ce que je suis en train de faire avec l'expression si.

Toute aide serait vraiment appréciée.

  • Il fonctionne ok ici, mais êtes-vous sûr que vous devez utiliser ng-class, et non pas dans le simple class?
  • Si vous modifiez onLoad à no wrap(body) le JSFiddle va exécuter le code AngularJS comme vous vous attendez.
  • Merci beaucoup Bert
InformationsquelleAutor jonhobbs | 2012-12-24
  1. 30

    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"}
    ]

    }

    en coulisse vous mettre des {{}} autour de l'expression ne pas le faire parce que c'est une expression.

    • Vous avez sauvé ma journée;)
    InformationsquelleAutor mpm
  2. 10

    Pour info, une alternative à ce que @camus a répondu:

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

    Lors de l'utilisation de class, l'expression (à l'intérieur de {{}}s) doit correspondre à une chaîne de l'espace délimité par les noms de classe.

    Lors de l'utilisation de ng-classe, l'expression doit correspondre à l'une des opérations suivantes:

    1. une chaîne de caractères de l'espace délimité par les noms de classe, ou
    2. et tableau des noms de classe, ou
    3. une carte/un objet de la classe des noms à des valeurs booléennes.
    • une autre alternative serait class="className-{{message.type}}"
    • toute idée de ce que la raison peut être pour que cela fonctionne dans tout sauf IE? "C'est IE!" le type de réponses ne sont pas acceptés...
    • dans angulaire, lorsque vous utilisez angulaire des variables à l'intérieur de la déclaration de la classe (comme dans votre exemple), vous devriez éviter cela, et d'utiliser ng-classe au lieu de cela, pour des raisons de performances lorsque le chargement de la page. Si vous utilisez class="className-{{...}}" de la page d'interpréter "className-{{...}}" comme une chaîne de caractères alors que le {{..}} n'est pas résolu et l'afficher à l'écran. Si vous utilisez ng de classe, il n'affiche rien alors que le {{..}} n'est pas résolu. De cette façon, avec ng-classe, vous n'obtiendrez pas le laid code affiché à l'écran. Dans des connexions internet plus rapides, ce n'est pas perceptible, mais il est plus lent internets.
    InformationsquelleAutor Mark Rajcok