सशर्त एनजी-कोणीयरों में शामिल करते हैं

93

मैं एंगुलर जेएस में सशर्त रूप से एनजी शामिल कैसे कर सकता हूं?

उदाहरण के लिए मैं केवल कुछ को शामिल करना चाहता हूं अगर, चर xको सेट किया गया है true।

<div ng-include="/partial.html"></div>

angularjs angularjs-ng-include

— JustGoscha
स्रोत

120

यदि आप कोणीय v1.1.5 या उसके बाद का उपयोग कर रहे हैं, तो आप एनजी का उपयोग भी कर सकते हैं :

<div ng-if="x" ng-include="'/partial.html'"></div>

यदि आपके पास कोई पुराना संस्करण है:

एनजी-स्विच का उपयोग करें :

<div ng-switch on="x">
   <div ng-switch-when="true" ng-include="'/partial.html'"></div>
</div>

बेला

— मार्क राजकोक
स्रोत

5

हां, यह वर्तमान में 1.2 में टूट गया है: github.com/angular/angular.js/issues/3627

— मार्क राजकोक

2

इस मुद्दे को v1.2.2-23ba287 code.angularjs.org/snapshot/angular.js

— यूजीन ग्लुहटरेंको

7

Github.com/angular/angular.js/issues/3627#issuecomment-23539882 देखें ; वर्तमान संस्करणों (1.2। *) में आप एक ही तत्व पर एनजी-स्विच और एनजी-शामिल का उपयोग नहीं कर सकते हैं, इसलिए आपको कुछ इस तरह की आवश्यकता है: <div ng-switch-when = "true"> <div ng-शामिल = "'कुछ ''> </ div> <// div>

— Maarten

68

आप भी कर सकते हैं

<div ng-include="getInclude()"></div>

अपने कंट्रोलर में

$scope.getInclude = function(){
    if(x){
        return "partial.html";
    }
    return "";
}

— ganaraj
स्रोत

बस सच में अच्छा है। ng-switchचिह्नित जवाब मेरे लिए काम नहीं किया।

— im1dermike

1

एक नियंत्रक सेट दृश्य फ़ाइलों के लिए उपयुक्त है? मुझे लगता है, नहीं @ मर्क रजक जवाब सच है।

— ivahidmontazer

16

उत्तरों में से एक का थोड़ा अधिक पठनीय संस्करण। इसके अलावा तत्व ng-includeको nullहटाने के लिए सेटिंग - बस की तरह ng-if।

<div ng-include="x ? 'true-partial.html' : null"></div>

— राफेल लिंडमैन
स्रोत

11

यदि स्थिति काफी सरल है, तो आप सशर्त तर्क को सीधे एनजी-इन-एक्सप्रेशन में डाल सकते हैं:

<div ng-include="x && 'true-partial.html' || 'false-partial.html'"></div>

ध्यान दें कि अभिव्यक्ति xएकल उद्धरणों में नहीं है और इसलिए इसका मूल्यांकन किया जाता है। अधिक जानकारी के लिए http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA देखें ।

— dspies
स्रोत

मैं कहूंगा कि स्वीकृत समाधान वास्तव में अधिक पठनीय है क्योंकि चेक की स्थिति और वास्तविक शामिल अच्छी तरह से अलग हैं।

— तोबियास

2

मुझे एक समान समस्या का सामना करना पड़ा और हो सकता है कि यह खोज किसी की मदद कर सके। मुझे लिंक के क्लिक पर अलग-अलग भाग प्रदर्शित करने होंगे लेकिन एनजी-इफ और एनजी-स्विच दोनों इस परिदृश्य में काम नहीं कर रहे थे (नीचे कोड काम नहीं कर रहा था)।

<button type="button" class="btn btn-link" ng-click="viewType('LIST')">List All</button>
<button type="button" class="btn btn-link" ng-click="viewType('EDIT')">Edit</button>
<button type="button" class="btn btn-link" ng-click="viewType('VIEW')">View</button>

<section class="col-md-8 left-col">
    <span ng-if = "LIST">
        <div data-ng-include="'./app/view/articles/listarticle.html'">
    </span>
    <span ng-if = "EDIT">
        <div data-ng-include="'./app/view/articles/editorarticle.html'">
    </span>

</section>

इसलिए मैंने जो किया, वह एनजी-इफ का उपयोग करने के बजाय, लिंक पर क्लिक करने के लिए केवल आंशिकआर्टिकलयूआरएल (जो नियंत्रक में एक मॉडल है) के मूल्य को अपडेट करें और HTML पर कोड नीचे घोषित करें।

        <section class="col-md-8 left-col">
            <div data-ng-include="partialArticleUrl">
        </section>

— KanhuP2012
स्रोत