ng-include ตามเงื่อนไขใน angularjs

ฉันจะทำ ng-include ตามเงื่อนไขใน angularJS ได้อย่างไร

เช่นฉันเพียงต้องการที่จะรวมถึงบางสิ่งบางอย่างถ้าตัวแปรมีการตั้งค่าxtrue

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

หากคุณใช้ Angular v1.1.5 หรือใหม่กว่าคุณยังสามารถใช้ng-if :

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

หากคุณมีเวอร์ชันเก่ากว่า:

ใช้ng-switch :

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

ซอ

คุณยังสามารถทำได้

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

ในคอนโทรลเลอร์ของคุณ

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

คำตอบหนึ่งในเวอร์ชันที่อ่านได้ง่ายขึ้นเล็กน้อย พลัสตั้งค่าng-includeการnullลบองค์ประกอบ - ng-ifเช่นเดียวกับ

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

หากเงื่อนไขนั้นง่ายเพียงพอคุณสามารถใส่ตรรกะเงื่อนไขลงในนิพจน์ ng-include ได้โดยตรง:

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

โปรดทราบว่านิพจน์xไม่ได้อยู่ในเครื่องหมายคำพูดเดี่ยวดังนั้นจึงได้รับการประเมิน ดูhttp://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrAสำหรับรายละเอียดเพิ่มเติม

ฉันพบปัญหาที่คล้ายกันและการค้นพบนี้อาจช่วยใครบางคนได้ ฉันต้องแสดงบางส่วนที่แตกต่างกันเมื่อคลิกลิงก์ แต่ทั้ง ng-if และ ng-switch ทั้งสองไม่ทำงานในสถานการณ์นี้ (โค้ดด้านล่างไม่ทำงาน)

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

สิ่งที่ฉันทำคือแทนที่จะใช้ ng-if เมื่อคลิกที่ลิงค์เพียงแค่อัปเดตค่าของ partialArticleUrl (ซึ่งเป็นโมเดลในคอนโทรลเลอร์) และประกาศโค้ดด้านล่างบน html

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