कोणीय डेटा-बाध्यकारी AngularJS

Question

मैं एक AngularJS ऐप बना रहा हूं और मैं एक समस्या में भाग गया हूं। मैं थोड़ी देर के लिए ढांचे के साथ खेल रहा हूं और मुझे अभी तक इस तरह के किसी भी उदाहरण के लिए दस्तावेज देखना नहीं है। मुझे यकीन है कि जो रास्ता नीचे जाने के लिए नहीं कर रहा हूँ, निर्देशक, मॉड्यूल, या कुछ है कि मैं अभी तक के बारे में सुना नहीं किया है ...

समस्या:

मूल रूप से मेरी एप्लिकेशन को उपयोगकर्ता वस्तुओं को जोड़ने के लिए अनुमति देता है, हम इस उदाहरण के लिए स्पैन कहेंगे, जिसमें कुछ विशेषताएँ संपादन योग्य हैं: ऊंचाई और एक संबद्ध लेबल। प्रत्येक अवधि के बजाय ऊंचाई और लेबल हेरफेर के लिए अपने समर्पित इनपुट फ़ील्ड हैं, मैं इनपुट फ़ील्ड के एक सेट का उपयोग करना चाहता हूं जो हमारे स्पैन ऑब्जेक्ट के सभी पुनरावृत्तियों को नियंत्रित करने में सक्षम हैं।

तो मेरा लगभग। काम कर कोड कुछ इस तरह है:

<span ng-repeat="widget in chart.object"> 
    <label>{{widget.label}}</label> 
    <span id="obj-js" class="obj" style="height:{{widget.amt}}px"></span> 
</span> 
<button ng-click="addObject()" class="add">ADD</button> 

<input type="text" class="builder-input" ng-model="chart.object[0]['label']"/> 
<input type="range" class="slider" ng-model="chart.object[0]['amt']"/> 

ऊपर कोड उन नई वस्तुओं को जोड़ने करने देगा, लेकिन यूआई स्पष्ट रूप से सरणी में पहली वस्तु को hardcoded है।

वांछित कार्यशीलता:

एक उपयोगकर्ता एक वस्तु पर क्लिक करता है यह इनपुट के एनजी मॉडल का मूल्य अपडेट हो जाता है बाध्य करने के लिए वस्तु क्लिक किया। इसलिए यदि ऑब्जेक्ट_2 के मान के साथ समन्वयित करने के लिए इनपुट के ng-model अद्यतनों पर "ऑब्जेक्ट_2" क्लिक किया गया है। यदि उपयोगकर्ता "object_4" पर क्लिक करता है तो यह इनपुट के एनजी-मॉडल को अपडेट करता है, तो आपको विचार मिलता है। स्मार्ट यूआई, अनिवार्य रूप से।

मैंने "सिंक" नामक निर्देशक विशेषता लिखने के बारे में सोचा है जो एनजी-मॉडल स्थिति को बाध्य UI पर धक्का दे सकता है। मैंने पूरी तरह से <object> नामक एक नया टैग बनाने और नियंत्रक में इनका निर्माण करने के बारे में बताया है। और मैंने ng-click="someFn()" का उपयोग करने के बारे में सोचा है जो इनपुट फ़ील्ड अपडेट करता है। ये सभी 'संभावनाएं' हैं जिनके पास अपने स्वयं के पेशेवर और विपक्ष हैं, लेकिन मैंने सोचा कि इससे पहले कि मैं या तो कुछ खत्म कर दूं या गलत सड़क पर जाऊं, मैं समुदाय से पूछूंगा।

क्या किसी ने पहले ऐसा किया है (यदि ऐसा है, उदाहरण)? यदि नहीं, तो यह करने के लिए सबसे साफ, AngularJS तरीका क्या होगा? चीयर्स।

Answer 1

मुझे नहीं लगता कि आपको विशेष रूप से इस स्थिति के लिए एक कस्टम निर्देश का उपयोग करने की आवश्यकता है - हालांकि आपके नियंत्रण में अधिक शामिल होने के बाद यह आपके ऐप में सहायक हो सकता है।

स्वरूपण जोड़ा का एक सा के साथ इस संभावित समाधान पर नज़र के रूप में लेने,: http://jsfiddle.net/tLfYt/

मैं इस को हल करने के लिए सबसे सरल तरीका लगता है की आवश्यकता है: - गुंजाइश में स्टोर 'चुना' सूचकांक - बाइंड एनजी क्लिक प्रत्येक दोहराए गए अवधि के लिए, और सूचकांक को अद्यतन करने के लिए इसका उपयोग करें।

वहां से, आप ठीक उसी तरह कर सकते हैं जैसा आपने प्रस्तावित किया था: अपने इनपुट पर मॉडल अपडेट करें। घोषणात्मक सोच का यह तरीका कुछ है जो मुझे एंगुलर के बारे में पसंद है - आपका आवेदन उस तरीके से बह सकता है जिस तरह से आप तर्क के बारे में तर्कसंगत सोचेंगे।

अपने नियंत्रक में:

$scope.selectedObjectIndex = null; 

$scope.selectObject = function($index) { 
    $scope.selectedObjectIndex = $index; 
} 

अपने एनजी-दोहराने में:

<span ng-repeat="widget in chart.object" ng-click="selectObject($index)"> 

आपका आदानों:

<input type="text" class="builder-input" ng-model="chart.object[selectedObjectIndex]['label']"/> 
<input type="range" class="slider" ng-model="chart.object[selectedObjectIndex]['amt']"/>