AngularJS şablonları başqa

AngularJS şablonunda bir vəziyyət yaratmaq istəyirəm. Youtube API-dan videoların siyahısını əldə edirəm. Bəzi videolar 16: 9, bəziləri isə 4: 3dir.

Aşağıdakıları etmək istəyirəm:

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

Videonu ng-repeat . Bu vəziyyət üçün nə edəcəyimi bilmirəm:

  • Həcmi funksiyanı əlavə et?
  • Şablonda mı?
648
04 апр. vzhen tərəfindən təyin 04 Apr 2013-04-04 14:50 '13 'da 14:50' da 2013-04-04 14:50
@ 9 cavab

Angularjs (1.1.5-dən aşağıdakı versiyalar) if/else funksiyası vermir. Aşağıdakı işləri yerinə yetirmək istədiyinizi nəzərdən keçirmək üçün bir neçə variant var:

( Sürüm 1.1.5 və ya daha yüksək istifadə etdiyiniz təqdirdə (# 5 )

1. Üçqat operator:

Şərhdə @Kirk tərəfindən təklif edildiyi kimi, bunu etmək üçün ən təmiz üsul üçlü operatoru aşağıdakı kimi istifadə etmək olar:

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

2. ng-switch direktivi:

aşağıdakı kimi bir şey istifadə edə bilərsiniz.

 <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 direktivləri

Alternativ olaraq, ng-show/ng-hide də istifadə edə bilərsiniz ng-show/ng-hide lakin bu, həqiqətən, həm də böyük bir video və kiçik bir video elementi ng-show və sonra ng-hideng-show şəraitinə uyğun olanı ng-hide , ng-show vəziyyətinə cavab verir, Beləliklə, hər səhifədə iki fərqli elementi göstərəcəksiniz.

Diqqət yetirmək üçün başqa bir seçim isə ng-class direktividir.

Bu aşağıdakı kimi istifadə edilə bilər.

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

video.large doğru olduqda, yuxarıda əsasən css large-video sinifini div elementinə əlavə video.large .

YENİLƏNİB: Corner 1.1.5 ngIf directive ilə təqdim olundu

5. ng-if direktivi:

1.1.5 dən yuxarı versiyalarda ng-if direktivindən istifadə edə bilərsiniz. Verilən ifadənin false qaytardıqda və ifadənin true olduqda element DOM-a yenidən daxil edərsə bu elementi aradan qaldıracaq. Aşağıdakı kimi istifadə edilə bilər.

 <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> 
1201
04 апр. cavab Amyth 04 apr verilir . 2013-04-04 14:58 '13 at 14:58 2013-04-04 14:58

ngIf ən son versiyasında (1.1.5-dən bəri) onlar şərti direktivə daxil ngIf . ngShowngHide fərqlidir ki, elementlər gizli deyil, lakin DOM-a daxil deyildir. Onlar qurmaq üçün bahalı komponentlər üçün çox faydalıdır, lakin istifadə edilmir:

border=0
 <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> 
166
09 июля '13 в 19:54 2013-07-09 19:54 Cavab Brian Genisio tərəfindən verilir 09.07.2013 19:54

Ternar bunu etmək üçün ən etibarlı yoludur.

 <div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div> 
133
05 сент. Cavab Oliver Dixon verildi. 2014-09-05 08:18 '14 at 8:18 AM 2014-09-05 08:18

Açar özü / else funksiyasını təmin etmir, amma bu modulu daxil etməklə əldə edə bilərsiniz:

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

Öz sözlərinə görə, bu sadəcə "nəzarət axını direktivlərinin sadə kolleksiyası: ng-if, ng-else-if və ng-else". Bu, asan və intuitivdir.

Məsələn:

 <div ng-if="someCondition"> ... </div> <div ng-else-if="someOtherCondition"> ... </div> <div ng-else> ... </div> 
41
04 окт. Cavab lpappone 04 oct verilir . 2014-10-04 00:38 '14 at 0:38 2014-10-04 00:38

video.yt$aspectRatio birbaşa filtr vasitəsilə keçərək və nəticəni şablonunuzdakı height xüsusiyyətinə bağlayaraq istifadə etmək olar.

Filtreniz bu kimi bir şeyə baxacaq:

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

Və nümunə olacaq:

 <video height={{video.yt$aspectRatio | videoHeight}}></video> 
26
04 апр. Cavab Nuh Freitas tərəfindən verilir 04 Apr. 2013-04-04 19:45 '13 saat 19:45 'da 2013-04-04 19:45

Bu halda, obyektin xüsusiyyətindən asılı olaraq piksel dəyərini "hesablamaq" istəyir.

Piksel dəyərlərini hesablayan nəzarətçi bir funksiyanı təyin edəcəyəm.

Denetleyicide:

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

Sonra şablonunuzda yaz:

 element height="{{ GetHeight(aspect) }}px " 
10
29 окт. Cavab 29 Oktyabrda verilir . 2013-10-29 14:35 '13 'da 14:35' de 2013-10-29 14:35

Trojan çox təmiz olduğuna razıyam. Bir mənada bir div və ya p və ya bir masa göstərmək lazımdır, baxmayaraq ki, çox situativ görünür, buna görə mən açıq-aydın səbəblərə görə üçqat masa seçməyəcəyəm. Bir funksiya çağırışını yerinə yetirmək adətən mükəmməl və ya mənim vəziyyətimdə bunu etdi:

 <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> 
8
23 июля '15 в 23:58 2015-07-23 23:58 Cavab 23 iyul 'da 23:58' də Tom Stickel tərəfindən verilir. 2015-07-23 23:58
  <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div> 

Ng-if direktivini yuxarıdakı kimi istifadə edə bilərsiniz.

3
08 дек. Cavab JBhardwaj 08 dec tərəfindən verilir . 2016-12-08 15:36 '16 saat 15:36 'də 2016-12-08 15:36

Açısal bir fürsət: html hissəsində bir if-bəyanat əlavə etmək məcburiyyətindəyəm, yaratdığım bütün dəyişən URL'lərin müəyyənləşdirildiyini yoxlamaq məcburiyyətindəyəm. Bunu aşağıdakı kimi etdim və bu, çevik bir yanaşma kimi görünür. İnşallah kimsə bu üçün faydalı olacaq.

Şablondakı html hissəsi:

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

Partiya yazı tipi:

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

Təşəkkür və ən xoş arzularım,

Jan

1
09 окт. Jan Klemens Stoffregen tərəfindən verilmiş cavab 09 oktyabr 2017-10-09 11:44 '17 saat 11:44 'də 2017-10-09 11:44

tags ilə bağlı digər suallar və ya sual