2014-10-17 8 views
9

के साथ कथन है तो मुझे दोहराए गए कथन के साथ एक उपयोग करने का प्रयास करने में परेशानी हो रही है।AngularJS अगर ng-repeat

मैं, प्राप्त कर रहा है डेटा कर रहा हूँ इस प्रकार है:

modules: Array[1] 
    0: Object 
     embed: "<iframe width="600" height="338" src="https://www.youtube.com/embed/UqdDAn4_iY0" 
       frameborder="0" allowfullscreen="" style="margin:0px auto;display:block;"></iframe>" 
     type: "embed" 
    1: Object 
     src: "https://m1.behance.net/rendition/modules/127899607/disp/072cebf2137c78359d66922ef9b96adb.jpg" 
     type: "image" 

तो, अगर मॉड्यूल छवि का एक प्रकार है, मैं छवि प्राप्त करना चाहते हैं। अगर इसमें टाइप एम्बेड है, तो मैं आईफ्रेम प्राप्त करना चाहता हूं। मेरा वर्तमान दृश्य कोड है:

<div ng-repeat="project in project.modules" ng-if="project.type == 'image'"> 
    <img src="{{ project.src }}" class="img-responsive img-centered" alt="{{ project.name }}"/> 
</div> 

अगर मैं एनजी-अगर बाहर लेता हूं तो यह अच्छी तरह से काम करता है। कंसोल निम्न त्रुटि आउटपुट:

Error: Multiple directives [ngRepeat, ngIf] asking for transclusion on: <!-- ngRepeat: project in project.modules --> 

उत्तर

20

आप ngIf का उपयोग करने के बजाय फ़िल्टर का उपयोग कर सकते हैं। आपका कोड इस तरह होगा:

<div ng-repeat="project in project.modules | filter: { type: 'image' }"> 

और यह काम करेगा।

समाधान आप अपने कोड में करने के लिए कोशिश कर रहे हैं ngIf और ngRepeat दोनों को हटाने और कुछ तत्वों की जगह और कुछ ट्रांसक्लुजन करने का प्रयास कर के रूप में नहीं किया जा सकता।

चेक इस मुद्दे https://github.com/angular/angular.js/issues/4398

इसके अलावा फिल्टर https://docs.angularjs.org/tutorial/step_09

के उपयोग की जांच और इस सवाल का फिल्टर ng-repeat :filter by single field

4

आप एक ही तत्व पर ng-repeat और ng-if उपयोग नहीं कर सकते, क्योंकि उन दोनों के काम करने के लिए चाहते हैं हटाने की तरह & पूरे तत्व की जगह। इस तरह की समझ में आता है - ng-repeat कह रहा है कि आप क्या करेंगे "अरे इसे आकर्षित करें" लेकिन ng-if कह रहा है "अरे कोई इसे नहीं खींचता?"

मुझे लगता है कि यहां सबसे अच्छा समाधान आपके सरणी को प्रीप्रोसेस करना होगा जिसमें केवल आपके इच्छित रिकॉर्ड शामिल होंगे, और उसके बाद ng-repeat उस पर ng-if के साथ होगा। आप को ng-repeat तत्व के अंदर किसी तत्व में स्थानांतरित कर सकते हैं, ताकि & छिपी हुई चीज़ों के बारे में कोई अस्पष्टता न हो।

10

इसका कारण यह है कि आप एनजी-दोहराने ब्लॉक के अंदर अगर हालत क्या करना है है। उदाहरण के लिए:

<label ng-repeat="elem in list"> 
    <div ng-if="..."> 
     show something for this condition 
    </div> 

    </label> 

एनजी-दोहराना के साथ होने के लिए आपको एनजी-अगर आवश्यकता क्यों है?

+0

धन्यवाद, कि चाल किया! :) –

+1

यह शायद आपके प्रश्न के अनुसार चयनित उत्तर होना चाहिए था। – user1012500

6

यह केवल "लेख" और "article1" प्रदर्शित करना चाहिए साथ ngRepeat उपयोग करने के साथ उपयोगी होगा स्क्रीन

पर
<li ng-repeat="value in values" ng-if="value.name == 'article' || value.name == 'article1'"> 

<label>{{value.name}}</label> 
संबंधित मुद्दे