2013-02-09 14 views
11

मैं एक प्रश्न के बारे में How to associate objects as models using ng-options in angularjs कहा था की सरणी का प्रबंधन करने के।उपयोग चेक बॉक्स वस्तुओं

और मुझे बहुत तेज़ जवाब मिला। मेरा अनुवर्ती प्रश्न यह है कि बच्चे ऑब्जेक्ट सरणी को संभालने के लिए प्रतिक्रिया <select mutiple> का उपयोग करती है।

आप जो मैं चाहता की एक काम उदाहरण देख सकते हैं, http://plnkr.co/edit/FQQxrSE89iY1BnfumK0A?p=preview

पर <select> के साथ काम कर रहा <input type='checkbox'> (<select> के बजाय) का उपयोग कर सकते कैसे उस वस्तु सरणी अर्थात ng:model="shirt.colors" संभाल करने colors वस्तु सरणी से वस्तुओं को दोहरा रहा है।

कारण, यह मेरे लिए इतना जटिल प्रतीत होता है कि मुझे मूल्यों की सरणी के बजाय वस्तुओं की एक सरणी का प्रबंधन करना है ... उदाहरण के लिए, यदि आप पहेली में देखते हैं, तो color ऑब्जेक्ट्स और shirt ऑब्जेक्ट है एकाधिक रंग

यदि color ऑब्जेक्ट में परिवर्तन होता है, तो इसे ऑब्जेक्ट्स को shirt ऑब्जेक्ट्स में बदलना चाहिए।

अग्रिम धन्यवाद।

उत्तर

18

आपको बस अपने दायरे में कुछ मध्यवर्ती मूल्य की आवश्यकता है, और इसमें चेकबॉक्स को बाध्य करें। अपने नियंत्रक में - इसके लिए देखें, और मूल्य के अनुसार shirt.colors मैन्युअल रूप से पुनर्निर्माण करें।

<div ng-repeat='shirt in shirts'> 
    <h3>Shirt.</h3> 
    <label>Size: <input ng-model='shirt.size'></label><br/> 
    <label>Colors:</label> 
    <label ng-repeat="color in colors"> 
    {{color.label}} <input ng-model="selection[$parent.$index][$index]" type="checkbox"/> 
    </label> 

    </label> 
</div> 

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

$scope.selection = [[],[]]; 
$scope.$watch('selection', function() { 
    console.log('change', $scope.selection); 
    angular.forEach($scope.selection, function (shirtSelection, index) { 
    $scope.shirts[index].colors = []; 
    angular.forEach(shirtSelection, function (value, index2) { 
     if (value) $scope.shirts[index].colors.push($scope.colors[index2]); 
    }); 
    }); 
}, true); 

आप इसे यहाँ का परीक्षण कर सकते हैं: http://plnkr.co/edit/lh9hTa9wM5fkh3nT09RJ?p=preview

+0

धन्यवाद। यह वही है जो मैं देख रहा था :) –

+0

वह शानदार है, बहुत बहुत धन्यवाद! –

+1

बहुत बढ़िया - बढ़िया विचार! पाइथोनिक की अवधारणा का उपयोग करने के अलावा, मैंने इस तीसरे पक्ष के निर्देश का उपयोग किया जिसने चेकबॉक्स में कोणीय के दृष्टिकोण से निपटने को सरल बनाने में मदद की। http://vitalets.github.io/checklist-model/ – ClearCloud8