AngularJS में रेडियो और चेकबॉक्स के साथ जटिल वस्तुओं से कैसे जुड़ें?

कहते हैं कि हम परियोजना सेवा के माध्यम से अवगत कराया परियोजनाओं का एक सेट है:AngularJS में रेडियो और चेकबॉक्स के साथ जटिल वस्तुओं से कैसे जुड़ें?

Select favorite project: 
%label.radio(ng-repeat="project in Project.query()") 
    %input(type="radio" ng-model="data.favoriteProject" value="{{project.id}}") {{project.name}}

इस आईडी मान को choices.favoriteProject सेट:

{ id: '123', name: 'Yeoman', watchers: '1233', ... } 
{ id: '123', name: 'Grunt', watchers: '4343', ... }

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

John's favorite project: 
{{Project.get(data.favoriteProject).name}}

क्या मैं तलाश कर रहा हूँ सीधे वस्तु ही है, आईडी नहीं करने के लिए रेडियो और चेक बॉक्स बाध्य करने के लिए एक रास्ता है, तो हम कर सकते थे

John's favorite project: 
{{data.favoriteProject.name}}

इसके बजाय। एनजी विकल्पों के माध्यम से चुनिंदा निर्देश के साथ यह संभव है, लेकिन हम इसे रेडियो और चेकबॉक्स के साथ कैसे कर सकते हैं? यदि संभव हो तो मैं संदर्भों के बजाय मिलान के लिए आईडी का उपयोग करना चाहता हूं।

स्पष्ट करने के लिए, यहां एक उदाहरण मैं

Select favorite project: 
%label.radio(ng-repeat="project in Project.query()") 
    %input(type="radio" ng-model="data.favoriteProject" value="{{project}}" ng-match="id") {{project.name}}

के लिए क्या देख रहा हूँ इसे कहते है: "कृपया वास्तविक परियोजना वस्तु को data.favoriteProject बाँध और संदर्भ के बजाय जांच करने के लिए आईडी का उपयोग करता है, तो वे मेल () "।

स्रोत

2013-01-15 randomguy

[अपडेट]

मैं पूरी तरह से ngValue निर्देश है, जो undocumented प्रतीत होता है की खोज के बाद मेरा उत्तर बदल दिया है। यह आपको रेडियो बटन इनपुट पर ngModel के मानों के रूप में केवल तारों की बजाय ऑब्जेक्ट्स को बाध्य करने की अनुमति देता है।

<label ng-repeat="project in projects"> 
    <input type="radio" ng-model="data.favoriteProject" 
    ng-value="project">{{project.name}}</input> 
</label> 

<p>Your favorite project is {{data.favoriteProject.name}}.</p>

यह सिर्फ आईडी के बजाय जांच करने के लिए संदर्भ का उपयोग करता है, लेकिन मैं ज्यादातर मामलों में लगता है कि यह लोगों की खोज की जाएगी। यदि आप बहुत सख्ती से केवल आईडी के आधार पर मिलान करना चाहते हैं, तो आप [पुराना उत्तर], नीचे, या इससे भी बेहतर, केवल एक फ़ंक्शन बनाएं - उदाहरण के लिए उपयोग कर सकते हैं। projectById(projectId) कि आप इसकी आईडी के आधार पर एक प्रोजेक्ट देखने के लिए उपयोग कर सकते हैं।

मैं प्रदर्शित करने के लिए JSFiddle नवीनीकृत किया है: http://jsfiddle.net/BinaryMuse/pj2GR/

[ओल्ड उत्तर]

शायद आप को प्राप्त करने के आप क्या चाहते हैं रेडियो बटन निर्देश का ng-change विशेषता का उपयोग कर सकते हैं। इस HTML पर विचार करें:

<p>Select your favorite project:</p> 
<label ng-repeat="project in projects"> 
    <input type="radio" ng-model="data.favoriteProjectId" value="{{project.id}}" 
     ng-change="data.favoriteProject = project"> 
    {{project.name}} 
    </input> 
</label> 

<p>Your favorite project is {{data.favoriteProject.name}}.</p>

तुम भी एक समारोह ng-change अंदर, उदाहरण के setfavoriteProject(project) --but मुझे लगता है कि यहाँ सादगी की खातिर नहीं किया के लिए कह सकते हैं।

यहाँ तकनीक का प्रदर्शन करने के लिए एक काम कर jsFiddle है: http://jsfiddle.net/BinaryMuse/pj2GR/7/

स्रोत

2013-01-16 06:20:43

धन्यवाद! मुझे वास्तव में यह समाधान पसंद है। यह आसान है, फिर भी यह अच्छी तरह से काम करता है! मैं अब के लिए अन्य समाधानों के लिए खुला प्रश्न छोड़ दूंगा। इसके साथ समस्या यह है कि डेटा (आईडी) का दोहराव है और हमें खुद को मूल्य निर्धारित करना है। – randomguy

प्रोजेक्ट ऑब्जेक्ट की बजाय परियोजनाओं [$ अनुक्रमणिका] का उपयोग क्यों करें? – randomguy

मैंने जेएसफ़िल्ड में रीफैक्टरिंग की, लेकिन पोस्ट को अपडेट करना भूल गया। धन्यवाद! –

नहीं एनजी-बदलाव की जरूरत है (और मैं, यकीन नहीं है अगर यह इस तरह इनलाइन कोड लिखने के लिए एक अच्छा अभ्यास दूसरी ओर है। कोणीय निर्देश स्वयं से बहुत दूर नहीं हैं)।क्यों सिर्फ कुछ इस तरह नहीं है (और साथ एनजी-दोहराने के साथ काम करता है):

फिडल: http://jsfiddle.net/JohannesJo/VeZxh/3/

कोड:

<body ng-app="app"> 
<div ng-controller='controller'> 
<input type = "radio" ng-model = "oSelected" value = "{{aData[0]}}"> 
<input type = "radio" ng-model = "oSelected" value = "{{aData[1]}}"> 
<div>test:  {{oSelected}}</div> 
</div> 
</body> 


app = angular.module('app',[]); 

app.controller('controller', function($scope){ 
$scope.aData = [ 
    {o:1}, 
    {o:2} 
]; 
$scope.oSelected = {}; 
});

संपादित करें: मैं शायद उल्लेख करना चाहिए कि यह काम नहीं करता चेकबॉक्स के लिए, क्योंकि मान या तो सत्य या गलत होगा। इसके अलावा एक साझा मॉडल सभी चेकबॉक्सों को या तो चेक किया जा रहा है या एक ही समय में अनचेक किया जाएगा।

स्रोत

2013-02-28 21:08:58

'एनजी-वैल्यू' समाधान देखें, यह काफी लचीला है – genuinefafa

AngularJS में रेडियो और चेकबॉक्स के साथ जटिल वस्तुओं से कैसे जुड़ें?

उत्तर

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