ถ้ามีคำสั่ง else ในเทมเพลต AngularJS

ฉันต้องการทำเงื่อนไขในเทมเพลต AngularJS ฉันดึงรายชื่อวิดีโอจาก Youtube API วิดีโอบางรายการมีอัตราส่วน 16: 9 และบางส่วนอยู่ในอัตราส่วน 4: 3

ฉันต้องการสร้างเงื่อนไขเช่นนี้:

if video.yt$aspectRatio equals widescreen then 
    element's attr height="270px"
else
    element's attr height="360px"

ฉัน iterating ng-repeatวิดีโอโดยใช้ ไม่มีความคิดว่าฉันควรทำอย่างไรสำหรับเงื่อนไขนี้:

• เพิ่มฟังก์ชั่นในขอบเขตหรือไม่
• ทำในเทมเพลตหรือไม่

Angularjs (รุ่นด้านล่าง 1.1.5) ไม่ได้มีif/elseฟังก์ชันการทำงาน ตัวเลือกต่อไปนี้เป็นตัวเลือกในการพิจารณาสิ่งที่คุณต้องการบรรลุ:

( ข้ามไปยังการอัปเดตด้านล่าง (# 5) หากคุณใช้เวอร์ชั่น 1.1.5 หรือสูงกว่า )

1. ผู้ประกอบการที่ประกอบไปด้วย:

ตามคำแนะนำของ @Kirk ในความคิดเห็นวิธีที่สะอาดที่สุดในการทำเช่นนี้คือการใช้ผู้ประกอบการที่ประกอบไปด้วยดังนี้:

<span>{{isLarge ? 'video.large' : 'video.small'}}</span>

2. ng-switchคำสั่ง:

สามารถใช้สิ่งต่อไปนี้

<div ng-switch on="video">
    <div ng-switch-when="video.large">
        <!-- code to render a large video block-->
    </div>
    <div ng-switch-default>
        <!-- code to render the regular video block -->
    </div>
</div>

3. ng-hide/ ng-showคำสั่ง

หรือคุณอาจใช้ng-show/ng-hideแต่การใช้วิธีนี้จะแสดงทั้งวิดีโอขนาดใหญ่และองค์ประกอบวิดีโอขนาดเล็กจากนั้นซ่อนรายการที่ตรงตามng-hideเงื่อนไขและแสดงรายการที่ตรงตามng-showเงื่อนไข ดังนั้นในแต่ละหน้าคุณจะแสดงสององค์ประกอบที่แตกต่างกัน

4. ตัวเลือกอื่นที่ควรพิจารณาคือng-classคำสั่ง

สามารถใช้งานได้ดังนี้

<div ng-class="{large-video: video.large}">
    <!-- video block goes here -->
</div>

ด้านบนโดยทั่วไปจะเพิ่มlarge-videoคลาส CSS ไปยังองค์ประกอบ div ถ้าvideo.largeเป็นความจริง

ปรับปรุง: Angular 1.1.5แนะนำngIf directive

5. ng-ifคำสั่ง:

ในเวอร์ชันด้านบน1.1.5คุณสามารถใช้ng-ifคำสั่ง นี้จะลบองค์ประกอบถ้าแสดงออกให้ผลตอบแทนfalseและแทรกอีกครั้งelementใน DOM trueถ้าผลตอบแทนการแสดงออก สามารถใช้งานได้ดังนี้

<div ng-if="video == video.large">
    <!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
    <!-- code to render the regular video block -->
</div>

ในรุ่นล่าสุดของเชิงมุม ( ณ วันที่ 1.1.5) ngIfพวกเขาได้รวมคำสั่งเงื่อนไขที่เรียกว่า มันแตกต่างจากngShowและngHideในที่องค์ประกอบจะไม่ถูกซ่อน แต่ไม่รวมอยู่ใน DOM เลย มีประโยชน์มากสำหรับส่วนประกอบที่มีค่าใช้จ่ายสูง แต่ไม่ได้ใช้

<div ng-if="video == video.large">
    <!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
    <!-- code to render the regular video block -->
</div>

Ternary เป็นวิธีที่ชัดเจนที่สุดในการทำเช่นนี้

<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>

แองกูลาร์ไม่ได้ให้ฟังก์ชันการทำงานอื่น / แต่คุณสามารถรับมันได้ด้วยการรวมโมดูลนี้:

https://github.com/zachsnow/ng-elif

ในคำพูดของตัวเองมันเป็นแค่ "ชุดคำสั่งควบคุมการไหลอย่างง่าย: ng-if, ng-else-if และ ng-else" ใช้งานง่ายและใช้งานง่าย

ตัวอย่าง:

<div ng-if="someCondition">
    ...
</div>
<div ng-else-if="someOtherCondition">
    ...
</div>
<div ng-else>
    ...
</div>

คุณสามารถใช้video.yt$aspectRatioคุณสมบัติของคุณโดยตรงโดยส่งผ่านตัวกรองและเชื่อมโยงผลลัพธ์กับแอตทริบิวต์ height ในเทมเพลตของคุณ

ตัวกรองของคุณจะมีลักษณะดังนี้:

app.filter('videoHeight', function () {
  return function (input) {
    if (input === 'widescreen') {
      return '270px';
    } else {
      return '360px';
    }
  };
});

และแม่แบบจะเป็น:

<video height={{video.yt$aspectRatio | videoHeight}}></video>

ในกรณีนี้คุณต้องการ "คำนวณ" ค่าพิกเซลขึ้นอยู่กับคุณสมบัติของวัตถุ

ฉันจะกำหนดฟังก์ชั่นในคอนโทรลเลอร์ที่คำนวณค่าพิกเซล

ในตัวควบคุม:

$scope.GetHeight = function(aspect) {
   if(bla bla bla) return 270;
   return 360;
}

จากนั้นในเทมเพลตของคุณคุณเพียงแค่เขียน:

element height="{{ GetHeight(aspect) }}px "

ฉันยอมรับว่าternaryมีความสะอาดมาก ดูเหมือนว่ามันเป็นสถานการณ์ที่ดีแม้ว่าฉันจะต้องแสดง div หรือ p หรือตารางดังนั้นฉันมีตารางที่ฉันไม่ชอบไตรภาคเพราะเหตุผลที่ชัดเจน การโทรไปที่ฟังก์ชั่นนั้นโดยปกติแล้วจะเหมาะหรือในกรณีของฉันฉันทำสิ่งนี้:

<div ng-controller="TopNavCtrl">
        <div ng-if="info.host ==='servername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
       <div ng-if="info.host ==='otherservername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
</div>

    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

คุณสามารถใช้คำสั่ง ng-if ดังกล่าวข้างต้น

ความเป็นไปได้สำหรับ Angular: ฉันต้องรวมคำสั่ง if - ในส่วน html ฉันต้องตรวจสอบว่าตัวแปรทั้งหมดของ URL ที่ฉันสร้างถูกกำหนด ฉันทำตามวิธีต่อไปนี้และดูเหมือนว่าจะเป็นวิธีที่ยืดหยุ่น ฉันหวังว่ามันจะเป็นประโยชน์สำหรับใครบางคน

ส่วน html ในเทมเพลต:

    <div  *ngFor="let p of poemsInGrid; let i = index" >
        <a [routerLink]="produceFassungsLink(p[0],p[3])" routerLinkActive="active">
    </div>

และส่วน typescript:

  produceFassungsLink(titel: string, iri: string) {
      if(titel !== undefined && iri !== undefined) {
         return titel.split('/')[0] + '---' + iri.split('raeber/')[1];
      } else {
         return 'Linkinformation has not arrived yet';
      }
  }

ขอขอบคุณและขอแสดงความนับถือ,

ม.ค.

ถ้ามีคำสั่งอื่น

ng-if="receiptData.cart == undefined ? close(): '' ;"