एंगुलरजे

में अभिव्यक्ति का उपयोग करके गतिशील रूप से एनजी-क्लास के लिए जेनरेटिंग चर मेरे एचटीएमएल कोड से स्निपेट है।एंगुलरजे

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

मुझे क्या करना कोशिश कर रहा हूँ क्या: मैं 3 div तत्व है जो एक स्क्रीन ऊपर लिखा स्निपेट का उपयोग कर के शीर्ष पर हो जाएगा बनाया है। प्रत्येक div तत्व को सीएसएस का उपयोग करके बॉक्स का आकार दिया जाएगा। एक बॉक्स (div) में इसकी पृष्ठभूमि के रूप में या तो पृष्ठभूमि या काले रंग के रूप में लाल रंग हो सकता है। दो रंग के लिए

सीएसएस है:

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

इस उदाहरण मैं एक स्थिर JSON के रूप में $scope.myBoxes बना दिया है में लेकिन कार्यावधि में मैं करने की योजना:

.redBackground{ 
    background-color: red; 
} 

.blackBackground{ 
    background-color: black; 
}

यहाँ मेरी नियंत्रक से एक टुकड़ा है जेसन कोड जेनरेट करें ताकि मैं गतिशील रूप से अपने बक्से में पृष्ठभूमि रंग असाइन कर सकूं।

समस्या जो मुझे सामना कर रही है: अच्छी तरह से समस्या यह है कि मैं रंगों के साथ बॉक्स को देखने में सक्षम नहीं हूं। इस मामले में एनजी-क्लास वेरिएबल नाम जैसा कि आप देख सकते हैं गतिशील रूप से भी उत्पन्न होता है। अगर मैं एनजी-दोहराव का उपयोग नहीं करता हूं और गतिशील रूप से एनजी-क्लास परिवर्तनीय नाम उत्पन्न नहीं करता है तो यह ठीक काम करता है। उदाहरण के लिए नीचे दिए गए स्निपेट के लिए जब मैं गतिशील रूप से varibales myBoxes.Box1myBoxes.Box2 और myBoxes.Box3 के मान को बदलता हूं तो यह पूरी तरह से काम करता है।

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

लेकिन अगर मैं एनजी स्तरीय चर गतिशील "myBoxes.{{boxName}}" तो यह एक चर की तरह व्यवहार नहीं करता है उत्पन्न करते हैं। मुझे यकीन है कि मैं जो करने की कोशिश कर रहा हूं उसे हासिल करने का एक बेहतर तरीका होगा, हालांकि मुझे गुगलिंग/परीक्षण और त्रुटि के घंटों और घंटों के बाद यह नहीं मिला। अगर कोई मेरी मदद कर सकता है तो खुशी होगी।

स्रोत

2013-02-22 Durin

आप लगभग वहां हैं, यह myBoxes[boxName] है और myBoxes.{{boxName}} नहीं है।

कुछ इस तरह:

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

स्रोत

2013-02-22 09:05:44

बहुत बढ़िया! एक जादू की तरह काम करता है। लेकिन मुझे अभी भी आश्चर्य है कि यह डॉट नोटेशन का उपयोग करके जेसन ऑब्जेक्ट्स तक पहुंचने के सामान्य तरीके के बजाय सरणी नोटेशन का उपयोग करके जेसन ऑब्जेक्ट वैल्यू तक पहुंचने के द्वारा क्यों काम किया। मैं एक जावास्क्रिप्ट नौसिखिया हूं, अगर मैं एक बहुत ही मौलिक सवाल पूछ रहा हूं तो मैं क्षमा चाहता हूं। – Durin

सबसे पहले, 'myBoxes। {{BoxName}}' कोणीय में मान्य अभिव्यक्ति नहीं है, लेकिन 'myBoxes.boxName' और' myboxs [boxName] 'हैं। जावास्क्रिप्ट में, ये अभिव्यक्तियां समान हैं: 'myBoxes.boxName',' myboxs ['boxName'] 'और' var name = 'boxName'; MyBoxes [name]; 'जिसका अर्थ है कि जब आप किसी ऑब्जेक्ट पर कोई संपत्ति चाहते हैं लेकिन आपको नहीं पता कि संपत्ति का नाम क्या है, तो आप इसके बजाय एक चर के साथ सरणी नोटेशन का उपयोग कर सकते हैं। –

संपादित करें: ओह! फिर उस मामले में '{{'myBoxes।' + name}} 'मेरे लिए भी काम करना चाहिए क्योंकि यह एक वैध कोणीय जेएस अभिव्यक्ति है। लेकिन यह मेरे लिए काम नहीं करता है। स्पष्टीकरण के लिए धन्यवाद। – Durin

उत्तर

संबंधित मुद्दे