Generazione variabile per la classe ng in modo dinamico utilizzando Espressione in AngularJs

Ecco uno snippet del mio codice HTML.Generazione variabile per la classe ng in modo dinamico utilizzando Espressione in AngularJs

<div ng-repeat="boxName in boxNameList"> 
    <div ng-class="myBoxes.{{boxName}}">{{boxName}}</div> 
</div>

quello che sto cercando di fare: Ho creato 3 elementi div che saranno nella parte superiore di uno schermo utilizzando il pezzo di codice sopra scritta. Ad ogni elemento div verrà data una forma di una scatola usando css. Una casella (div) può avere il colore rosso come sfondo o il colore nero come sfondo.

CSS per i due colori è:

.redBackground{ 
    background-color: red; 
} 

.blackBackground{ 
    background-color: black; 
}

Ecco un frammento del mio controllo:

$scope.boxNameList=['Box1','Box2','Box3']; 
$scope.myBoxes={ 
     Box1: "redBackground", 
     Box2: "blackBackground", 
     Box3: "blackBackground" 
}

In questo esempio ho fatto $scope.myBoxes come JSON statico, ma in fase di esecuzione ho intenzione di generare codice Json in modo che possa assegnare dinamicamente i colori di sfondo alle mie scatole.

Problema che sto affrontando: Beh, il problema è che non sono in grado di vedere le caselle con i colori. Il nome della variabile di classe ng in questo caso, come puoi vedere, viene generato anche dinamicamente. Se non utilizzo ng-repeat e non dinamo in modo dinamico il nome della variabile ng, allora funziona bene. Ad esempio, per lo snippet riportato di seguito quando cambio dinamicamente il valore delle varibales myBoxes.Box1myBoxes.Box2 e myBoxes.Box3, allora funziona perfettamente.

<div ng-class="myBoxes.Box1">Box1</div> 
<div ng-class="myBoxes.Box2">Box2</div> 
<div ng-class="myBoxes.Box3">Box3</div>

Tuttavia, se ho generare la variabile ng classe dinamicamente "myBoxes.{{boxName}}" allora non si comporta come una variabile. Sono sicuro che ci sarebbe un modo migliore per ottenere ciò che sto cercando di fare, ma non sono stato in grado di trovarlo dopo ore e ore di google/tentativi ed errori. Sarei felice se qualcuno potesse aiutarmi.

fonte

2013-02-22 Durin

Ci sei quasi, è myBoxes[boxName] e non myBoxes.{{boxName}}.

Qualcosa di simile a questo:

<!doctype html> 
<html ng-app="myApp"> 
<head> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> 
    <script type="text/javascript"> 
    var myApp = angular.module('myApp', []); 

    myApp.controller('MainCtrl', ['$scope', function($scope){ 
     $scope.boxNameList=['Box1','Box2','Box3']; 
     $scope.myBoxes={ 
       Box1: "redBackground", 
       Box2: "blackBackground", 
       Box3: "blackBackground" 
     } 
    }]); 
    </script> 
    <style type="text/css"> 
    .redBackground{ 
     background-color: red; 
    } 

    .blackBackground{ 
     background-color: black; 
    } 
    </style> 
</head> 
<body ng-controller="MainCtrl"> 
    <div ng-repeat="name in boxNameList"> 
     <div ng-class="myBoxes[name]">Box1</div> 
    </div> 
</body> 
</html>

fonte

2013-02-22 09:05:44

Impressionante! funziona come un fascino. Ma mi chiedo ancora perché abbia funzionato accedendo ai valori degli oggetti Json usando la notazione degli array invece del normale modo di accedere agli oggetti Json usando la notazione dei punti. Sono un principiante javscript, mi scuso se pongo una domanda fondamentale. – Durin

Prima di tutto, 'myBoxes. {{BoxName}}' non è un'espressione valida in Angular, ma 'myBoxes.boxName' e' myBoxes [boxName] 'sono. In Javascript, queste espressioni sono le stesse: 'myBoxes.boxName',' myBoxes ['boxName'] 'e' var name = 'boxName'; myBoxes [nome]; 'che significa che quando si desidera una proprietà su un oggetto ma non si conosce il nome della proprietà, è possibile utilizzare la notazione dell'array con una variabile. –

Modifica: oh! allora in questo caso '{{'myBoxes.' + name}} 'dovrebbe funzionare anche per me poiché è un'espressione js angolare valida. Ma non funziona per me. Grazie per la spiegazione. – Durin

Generazione variabile per la classe ng in modo dinamico utilizzando Espressione in AngularJs

risposta

Problemi correlati