2012-12-21 10 views
14

यहाँ मैं किसी HTML तत्व गतिशील ng-repeat का उपयोग कर पैदा कर रहा हूँ जैसेangularjs में ng-model के लिए गतिशील रूप से मूल्य कैसे दें?

<div ng-repeat="type in types"> 
    <input type="checkbox" ng-model="{{type}}" />{{ type }} 
</div> 

मैं एनजी-मॉडल के लिए प्रकार मान सेट करना चाहते हैं। क्या यह संभव है या फिर मैं इस

<div ng-repeat="type in types"> 
    <input type="checkbox" ng-model="{{type}}" ng-true-value="{{type}}" />{{ type }} 
</div> 

उत्तर

11

के बाद से एनजी-दोहराने प्रत्येक प्रकार/आइटम/यात्रा के लिए एक बच्चे गुंजाइश बनाता है, हम माता पिता गुंजाइश के साथ प्रत्येक प्रकार के बजाय बच्चे को क्षेत्र के लिए एनजी मॉडल संबद्ध करना होगा।

<input type="checkbox" ng-model="$parent[type]">{{ type }} 

$ scope.types @ एलेक्स के जवाब में की तरह परिभाषित किया गया है, तो गुण typeOne, typeTwo, और typeThree माता पिता गुंजाइश पर दिखाई देगा, यदि इसी चेकबॉक्स है: एक ही रास्ता है कि ऐसा करने के लिए $ माता-पिता का उपयोग करना है क्लिक किया गया, और संपत्ति का मूल्य true होगा। यदि चेक किए गए चेकबॉक्स को फिर से क्लिक किया जाता है, तो संपत्ति बनी हुई है, और मान false पर स्विच हो जाएगा। इसलिए आपके कोड को गैर-मौजूद गुणों और गुणों के लिए जांचना होगा जो मान सेट के साथ सत्य या गलत पर मौजूद हैं। यह थोड़ा गन्दा है।

मैं माता पिता गुंजाइश है, जहां प्रत्येक ऑब्जेक्ट प्रकार (नाम) है पर वस्तुओं की एक सरणी पूर्वपरिभाषित करना पसंद करेंगे, और अगर यह चयन किया जाता है एक बूलियन से संकेत मिलता है या नहीं:

$scope.types = [ 
    {name: 'typeOne', selected: false}, 
    {name: 'typeTwo', selected: false}, 
    {name: 'typeThree', selected: false}]; 

फिर, $ माता-पिता की आवश्यकता नहीं है (क्योंकि "प्रकार" का मूल्य पैरेंट ऑब्जेक्ट के लिए एक संदर्भ है, बल्कि मूल प्रॉपर्टी की (आदिम) मूल्य की एक प्रति की तुलना में हो जाएगा):

<input type="checkbox" ng-model="type.selected">{{ type.name }} 

भी देखें What are the nuances of scope prototypal/prototypical inheritance in AngularJS? एनजी के बारे में अधिक जानने के लिए - दोहराना और बच्चे के scopes।

+0

यदि दायरे के भीतर किसी फ़ंक्शन का उपयोग करना है तो '$ parent.myFunc() 'को भी जंजीर किया जा सकता है और पैरामीटर पास किए गए हैं $ parent.myFunc (val) .cost' –

8

इस प्रकार आप $ गुंजाइश के गुणों में से एक में गतिशील मान संग्रहीत कर सकते तरह एनजी-सच मूल्य के लिए उस प्रकार मूल्य निर्धारित करना चाहते हैं:

function DynamicController($scope) { 
    $scope.types = [ 
     "typeOne", 
     "typeTwo", 
     "typeThree"   
    ]; 
    $scope.typeValues = {}; 
}; 

<div ng-app ng-controller="DynamicController"> 
    <div ng-repeat="type in types"> 
     <input type="checkbox" ng-model="typeValues[type]" ng-click="show()" /> {{ type }} 
    </div> 

    <h3>Values</h3> 
    <div ng-repeat="type in types"> 
     {{ type }} : {{ typeValues[type] }} 
    </div> 
</div> 

फिर आप अपने मूल्यों के माध्यम से अपने मूल्यों की वैल्यू संपत्ति के माध्यम से अपने मूल्यों की जांच कर सकते हैं।

var i, 
    length = $scope.types.length; 

for (i = 0; i < length; i++) { 
    console.log($scope.types[i] + " : " + $scope.typeValues[$scope.types[i]]); 
}    
संबंधित मुद्दे