AngularJs

'da İfadeyi kullanarak dinamik olarak ng sınıfı için değişken oluşturma İşte HTML kodumdan snippet.AngularJs

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

ben yapmaya çalışıyorum Ne: Yukarıda yazılı kısmını kullanarak bir ekranın üst kısmındaki olacak 3 div öğeleri oluşturduk. Her div elemanına css kullanılarak bir kutu şekli verilecektir. Bir kutu (div) arka planı olarak kırmızı rengi veya arka planı olarak siyah rengi olabilir. İki renkler için

CSS: Ben planlıyorum ben statik Json olarak $scope.myBoxes yapmış Bu örnekte ancak zamanında

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

: Burada

.redBackground{ 
    background-color: red; 
} 

.blackBackground{ 
    background-color: black; 
}

bir benim denetleyicisinden snippet'idir Json kodunu üreterek, arka plan renklerini dinamik olarak kutulara atayabilirim.

Karşı karşıya olduğum sorun: Sorun şu ki kutuların renklerini hiç göremiyorum. Bu durumda ng-class değişken ismi de görebileceğiniz gibi dinamik olarak üretilir. Eğer ng-yineleme kullanmazsam ve dinamik olarak ng-class değişken ismini yaratmazsam, o zaman iyi çalışır. Örneğin, aşağıda verilen snippet için myBoxes.Box1myBoxes.Box2 ve myBoxes.Box3 değişken değerlerini dinamik olarak değiştirdiğimde, mükemmel çalışır.

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

Ancak ng sınıf değişkeni dinamik "myBoxes.{{boxName}}" o zaman bir değişken gibi davranmaz oluşturursanız. Yapmaya çalıştığım şeyi elde etmenin daha iyi bir yolu olacağına eminim, ancak saatlerce ve saatler arasında googling/deneme ve hata bulmayı başaramadım. Birisi bana yardım ederse sevinirim.

kaynak

2013-02-22 Durin

Neredeyse ordasınız, myBoxes[boxName] ve myBoxes.{{boxName}} değil. Böyle

şey:

<!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>

kaynak

2013-02-22 09:05:44

Müthiş! ÇALIŞIYOR bir cazibe gibi. Ama yine de neden nokta notasyonunu kullanarak Json nesnelerine normal erişim yolu yerine dizi notasyonunu kullanarak Json nesne değerlerine erişerek çalışmayı merak ediyorum. Ben javscript newbie, çok temel bir soru soruyorsam özür dilerim. – Durin

İlk kapanış, 'myBoxes. {{BoxName}}' Angular içinde geçerli bir ifade değil, 'myBoxes.boxName' ve' myBoxes [boxName] 'dır. Javascript'te, bu ifadeler aynıdır: 'myBoxes.boxName',' myBoxes ['boxName'] 've' var name = 'boxName'; myBoxes [name]; 'bir nesne üzerinde bir özellik istediğinizde ancak özellik adının ne olduğunu bilmediğinizde, dizi gösterimini bunun yerine bir değişkenle birlikte kullanabileceğiniz anlamına gelir. –

Düzenleme: oh! sonra bu durumda '{{'myBoxes.' + name}} 'ayrıca geçerli bir açısal js ifadesi olduğu için benim için de çalışmalıdır. Ama benim için çalışmıyor. Açıklama için teşekkürler. – Durin

cevap

İlgili konular