শর্তসাপেক্ষ এনজিওরলজগুলিতে এনজি-অন্তর্ভুক্ত

Question

কীভাবে আমি কৌণিক জেজে এনজি-অন্তর্ভুক্ত করতে পারি?

উদাহরণস্বরূপ আমি কেবল কিছু অন্তর্ভুক্ত করতে চাই যদি, ভেরিয়েবল xসেট করা থাকে true।

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

Answer 1

আপনি যদি কৌণিক 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>

ফিডল

Comments

হ্যাঁ, এটি বর্তমানে 1.2 এ ভাঙা হয়েছে: github.com/angular/angular.js/issues/3627

— মার্ক রাজকক

ইস্যুটি v1.2.2-23ba287 কোড. angularjs.org/snapshot/angular.js

— ইউজিন গ্লাহোহোটোরেনকো

Github.com/angular/angular.js/issues/3627#issuecomment-23539882 দেখুন ; বর্তমান সংস্করণগুলিতে (1.2। '"> </div> </ div>

— মার্টেন

Answer 2

আপনি করতে পারেন

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

আপনার নিয়ামক মধ্যে

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

Comments

সত্যিই দুর্দান্ত। ng-switchচিহ্নিত উত্তর আমার জন্য কাজ করে নি।

— im1dermike

সেট নিয়ন্ত্রণ ফাইলগুলির জন্য কি কোনও নিয়ামক উপযুক্ত? আমি মনে করি, না। @ মার্ক রাজককের উত্তরটি সত্য।

— ivahidmontazer

Answer 3

উত্তরের একটুখানি আরও পঠনযোগ্য সংস্করণ। প্লাস সেটিং ng-includeথেকে nullঅপসারণ উপাদান - শুধু মত ng-if।

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

Answer 4

যদি শর্তটি যথেষ্ট সহজ হয় তবে আপনি শর্তসাপেক্ষ যুক্তি সরাসরি এনজি-অন্তর্ভুক্ত এক্সপ্রেশনটিতেও রাখতে পারেন:

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

নোট করুন এক্সপ্রেশনটি xএকক উদ্ধৃতিতে নয় এবং তাই মূল্যায়ন করা হয়। আরও বিশদ জানতে http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA দেখুন ।

Comments

আমি বলব গ্রহণযোগ্য সমাধানটি আসলে আরও বেশি পঠনযোগ্য কারণ চেক শর্ত এবং প্রকৃত অন্তর্ভুক্তটি সুন্দরভাবে পৃথক করা হয়েছে।

— টোবিয়াস

Answer 5

আমি একই ধরণের সমস্যার মুখোমুখি হয়েছি এবং এটি হতে পারে যে কাউকে সহায়তা করতে পারে। আমাকে লিঙ্কের ক্লিক করতে বিভিন্ন পার্টিয়াল প্রদর্শন করতে হবে তবে এনজি-ইফ এবং এনজি-সুইচ উভয়ই এই দৃশ্যে কাজ করছে না (নীচে কোডটি কাজ করছে না)।

<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>

সুতরাং আমি যা করেছি তা হ'ল এনজি-ইফ ব্যবহার করার পরিবর্তে লিঙ্কের ক্লিকের উপর ভিত্তি করে আংশিকআর্টিকাল ইউআরএল (যা নিয়ামকের একটি মডেল) এর মান আপডেট করুন এবং এইচটিএমএল এর নীচে কোডটি ঘোষণা করুন।

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