câu lệnh if khác trong các mẫu AngularJS

Tôi muốn làm một điều kiện trong một mẫu AngularJS. Tôi lấy danh sách video từ API Youtube. Một số video có tỷ lệ 16: 9 và một số tỷ lệ 4: 3.

Tôi muốn tạo một điều kiện như thế này:

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

Tôi đang lặp lại các video bằng cách sử dụng ng-repeat. Không biết tôi nên làm gì cho tình trạng này:

• Thêm một chức năng trong phạm vi?
• Làm điều đó trong mẫu?

Angularjs (phiên bản dưới 1.1.5) không cung cấp if/elsechức năng. Sau đây là một vài lựa chọn để xem xét cho những gì bạn muốn đạt được:

( Chuyển đến bản cập nhật bên dưới (# 5) nếu bạn đang sử dụng phiên bản 1.1.5 trở lên )

1. Toán tử ternary:

Theo đề xuất của @Kirk trong các bình luận, cách làm sạch nhất này sẽ là sử dụng toán tử ternary như sau:

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

2. ng-switchChỉ thị:

có thể được sử dụng một cái gì đó như sau.

<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-showchỉ thị

Ngoài ra, bạn cũng có thể sử dụng ng-show/ng-hidenhưng sử dụng điều này thực sự sẽ hiển thị cả video lớn và yếu tố video nhỏ và sau đó ẩn video đáp ứng ng-hideđiều kiện và hiển thị ng-showđiều kiện đáp ứng điều kiện. Vì vậy, trên mỗi trang sẽ thực sự hiển thị hai yếu tố khác nhau.

4. Một lựa chọn khác để xem xét là ng-classchỉ thị.

Điều này có thể được sử dụng như sau.

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

Về cơ bản ở trên sẽ thêm một large-videolớp css cho phần tử div nếu video.largelà sự thật.

CẬP NHẬT: Angular 1.1.5 giới thiệungIf directive

5. ng-ifChỉ thị:

Trong các phiên bản trên, 1.1.5bạn có thể sử dụng ng-ifchỉ thị. Điều này sẽ loại bỏ phần tử nếu biểu thức được cung cấp trả về falsevà chèn lại elementtrong DOM nếu biểu thức trả về true. Có thể được sử dụng như sau.

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

Trong phiên bản mới nhất của Angular (kể từ 1.1.5), chúng đã bao gồm một lệnh có điều kiện được gọi ngIf. Nó khác với ngShowvà ngHideở chỗ các yếu tố không bị ẩn, nhưng hoàn toàn không bao gồm trong DOM. Chúng rất hữu ích cho các thành phần tốn kém để tạo nhưng không được sử dụng:

<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 là cách rõ ràng nhất để làm điều này.

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

Bản thân Angular không cung cấp chức năng if / other, nhưng bạn có thể có được nó bằng cách bao gồm mô-đun này:

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

Nói theo cách riêng của nó, nó chỉ là "một tập hợp các chỉ thị luồng điều khiển đơn giản: ng-if, ng-other-if và ng-other." Thật dễ dàng và trực quan để sử dụng.

Thí dụ:

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

Bạn có thể sử dụng video.yt$aspectRatiotrực tiếp thuộc tính của mình bằng cách chuyển qua bộ lọc và ràng buộc kết quả với thuộc tính chiều cao trong mẫu của bạn.

Bộ lọc của bạn sẽ trông giống như:

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

Và mẫu sẽ là:

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

Trong trường hợp này, bạn muốn "tính toán" một giá trị pixel tùy thuộc vào thuộc tính đối tượng.

Tôi sẽ định nghĩa một hàm trong bộ điều khiển tính toán các giá trị pixel.

Trong bộ điều khiển:

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

Sau đó, trong mẫu của bạn, bạn chỉ cần viết:

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

Tôi đồng ý rằng một con chim nhạn cực kỳ sạch sẽ. Có vẻ như nó rất tình huống mặc dù đôi khi tôi cần hiển thị div hoặc p hoặc bảng, vì vậy với một bảng tôi không thích một ternary vì những lý do rõ ràng. Gọi cho một chức năng thường là lý tưởng hoặc trong trường hợp của tôi, tôi đã làm điều này:

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

bạn có thể sử dụng lệnh ng-if như trên.

Một khả năng cho Angular: Tôi phải bao gồm một câu lệnh if - trong phần html, tôi phải kiểm tra xem tất cả các biến của một URL mà tôi tạo ra có được xác định không. Tôi đã làm theo cách sau và nó có vẻ là một cách tiếp cận linh hoạt. Tôi hy vọng nó sẽ hữu ích cho ai đó.

Phần html trong mẫu:

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

Và phần bản thảo:

  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';
      }
  }

Trân trọng cảm ơn,

tháng một

ng Nếu tuyên bố khác

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