Keyingi va Oldingi elementlar burchakli2

Hey guys, men angular2 ga yangi

bu kabi funktsional imkoniyatlarga erishish uchun bir necha usullarni qo'llagan (jsfiddlega qarash).

Menga kerakli elementni bosing va keyingi elementga faol kursatkichni qo'shing va oldingi elementni oldingi btn.so uchun oldingi versiyani aks ettiradi va oldingi element ko'rsatiladi va oldingi narsalar yashiriladi. sinfni qo'shish yoki o'chirish yoki olib tashlash uslubini qo'shish men uchun ishlashi mumkin ... bu kabi narsaga erishish mumkin bo'lgan boshqa narsa

Men buni jQuery bilan erishgan edim.

Lekin angular2 bilan amalga oshirishni istayman, men uchun har qanday narsa bo'lishi mumkin

html:

  • item1
  • item2
  • item3
<button  class="prev">prev</button> <button class="next">Next</button>

jQuery:

$('.next').click( function(){
    $('.active').next().addClass('active').prev().removeClass('active')
})
$('.prev').click( function(){
    $('.active').prev().addClass('active').next().removeClass('active')
})

https://jsfiddle.net/svgmc125/

Tartibga solish:

kodi @pixelbits yordamidan foydalanib yangilangan

Endi HTML bo'ladi

  
 
  
 

  
  •  
      
     
      
     
    

    ts:

    export class SlidesComponent{
    
      slides: any[];
        selectedIndex: number;
        constructor() {
            this.selectedIndex = 0;
            this.slides = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
        }
    
        next() {
           ++this.selectedIndex;
        }
    
        previous() {
            --this.selectedIndex;
        }
    
     }
    

    its all working fine for looped

  • but still have issue with remaining
  • 1
    "akkordeon" uchun ishni ko'rib chiqing va "boshqalarga sinf qo'shish va boshqalardan olib tashlash"
    qo'shib qo'ydi muallif Chandrakant, manba

    6 javoblar

    Sizga kerak bo'lgan yagona narsa - komponentingizda faol elementga (yoki uning indeksiga) tegishli bo'lgan maydon:

    items: Array = ['first', 'second', 'third'];
    activeItem: string = items[0];
    
    previous() {
        const currentIndex = this.items.indexOf(this.activeItem);
        const newIndex = currentIndex === 0 ? this.items.length - 1 : currentIndex - 1;
        this.activeItem = this.items[newIndex];
    }
    
    next() {
        const currentIndex = this.items.indexOf(this.activeItem);
        const newIndex = currentIndex === this.items.length - 1 ? 0 : currentIndex + 1;
        this.activeItem = this.items[newIndex];
    }
    

    va shunga ko'ra:

    <div *ngFor="let item of items" [class.active]="item === activeItem">{{ item }}</div>
    
    4
    qo'shib qo'ydi
    • item1
    • item2
    • item3
    
    
    @ViewChildren('item') items:QueryList;
    
    ngAfterViewInit() {
      var active = this.items.toArray()
          .filter(i => i.nativeElement.classList.contains('active'));
      console.log(active[0].nativeElement);
    }
    
    3
    qo'shib qo'ydi
    Siz allaqachon javobni qabul qildingiz. O'ylaymanki, boshqa javoblar, odatda, sizning ishlatishingiz uchun qulayroqdir.
    qo'shib qo'ydi muallif Günter Zöchbauer, manba
    Men o'z savolimni yangiladim, javobingizni o'qib, yangilab turing
    qo'shib qo'ydi muallif Chandrakant, manba
    Ha, bu javoblar menga yordam berdi, ammo hali ham yopiq edi
    qo'shib qo'ydi muallif Chandrakant, manba

    Siz komponent sinfida ikkita modelga ega bo'lishingiz kerak: ob'ektlar qatori va selectedIndex. TanlanganIndeksdagi element elementga teng yoki yo'qligiga qarab, class ni bog'lang.

    @Component({
       selector: 'list',
       template: `
          
    • {{ item }}
       `
    })
    class MyComponent {
        items: string[];
        selectedIndex: number;
        constructor() {
            this.selectedIndex = 0;
            this.items = ["item1", "item2","item3"];
        }
    
        next() {
           ++this.selectedIndex;
        }
    
        previous() {
            --this.selectedIndex;
        }
    
    }
    
    3
    qo'shib qo'ydi
    • matn
      • Qanday qilib u dam olish uchun ishlashi kerak 2 LI - boshqa 2 LI pastadir emas .. bu erda ba'zi statik mazmun ... lekin hali ham faol sinfni qo'shish yoki o'chirishni xohlayman
  • qo'shib qo'ydi muallif Chandrakant, manba
  • ichidagi ulkan statik HTML ..
    • < li>
    • va bu mening slaydlarim bo'ladi. slaydlar = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
  • qo'shib qo'ydi muallif Chandrakant, manba
    Men shu narsani qo'shib qo'ydim ... lekin sahifa sukut bo'yicha faol bo`lsa loop uchun LI-da ishlayotgan bo`lsa ... lekin birinchi LI
    qo'shib qo'ydi muallif Chandrakant, manba
    Statik elementlarga indeks -1 va -2 ni belgilang va statik elementlaringizda [class.active] = "selectedIndex === -1" (yoki -2) dan foydalaning.
    qo'shib qo'ydi muallif JB Nizet, manba
    Shunday qilib, bu o'rniga this.selectedIndex ni 0 ga o'rnating. 0dan farqli o'laroq, agar siz uni tushunmasangiz kodni nusxa ko'chirishingiz va yopishingiz kerak emas.
    qo'shib qo'ydi muallif JB Nizet, manba
    Statik narsalarni ro'yxatga qo'shing
    qo'shib qo'ydi muallif pixelbits, manba

    Siz komponent sinfida ikkita modelga ega bo'lishingiz kerak: ob'ektlar qatori va selectedIndex. TanlanganIndeksdagi element elementga teng yoki yo'qligiga qarab, class ni bog'lang.

    @Component({
       selector: 'list',
       template: `
          
    • {{ item }}
       `
    })
    class MyComponent {
        items: string[];
        selectedIndex: number;
        constructor() {
            this.selectedIndex = 0;
            this.items = ["item1", "item2","item3"];
        }
    
        next() {
           ++this.selectedIndex;
        }
    
        previous() {
            --this.selectedIndex;
        }
    
    }
    
    3
    qo'shib qo'ydi
    • matn
      • Qanday qilib u dam olish uchun ishlashi kerak 2 LI - boshqa 2 LI pastadir emas .. bu erda ba'zi statik mazmun ... lekin hali ham faol sinfni qo'shish yoki o'chirishni xohlayman
  • qo'shib qo'ydi muallif Chandrakant, manba
  • ichidagi ulkan statik HTML ..
    • < li>
    • va bu mening slaydlarim bo'ladi. slaydlar = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
  • qo'shib qo'ydi muallif Chandrakant, manba
    Men shu narsani qo'shib qo'ydim ... lekin sahifa sukut bo'yicha faol bo`lsa loop uchun LI-da ishlayotgan bo`lsa ... lekin birinchi LI
    qo'shib qo'ydi muallif Chandrakant, manba
    Shunday qilib, bu o'rniga this.selectedIndex ni 0 ga o'rnating. 0dan farqli o'laroq, agar siz uni tushunmasangiz kodni nusxa ko'chirishingiz va yopishingiz kerak emas.
    qo'shib qo'ydi muallif JB Nizet, manba
    Statik elementlarga indeks -1 va -2 ni belgilang va statik elementlaringizda [class.active] = "selectedIndex === -1" (yoki -2) dan foydalaning.
    qo'shib qo'ydi muallif JB Nizet, manba
    Statik narsalarni ro'yxatga qo'shing
    qo'shib qo'ydi muallif pixelbits, manba

    Buruq va boshqalar jQuery bilan muomala qilishda muammoning atrofida fikrlashingiz turli bo'lishi kerak. Burchakda, HTML/View-ni kodingizda ma'lumotlar modelingizning ingl. Aks etishi deb o'ylash foydali bo'ladi.

    Masalan, masalan siz kabi komponent mavjud:

    @Component({
      template: `
        
    • item1
    • item2
    • item3
        <button class="prev" (click)="previous()">prev</button> 
        <button class="next" (click)="next()">Next</button>
      `
    })
    export class ListComponent {
       current = 0;
    
       next() {
         if (current == 0) {
           current = 2;
         } else {
           current = current - 1;
         }
       }
    
       next() {
         current = (current + 1) % 3;
       }
    }
    

    Yuqorida keltirilgan komponent Siz tasvirlagan funksiyani amalga oshiradi. Lekin bundan ham muhimi, burchakning nima ekanligini tushunishdir. Komponentingizda ko'rsatmoqchi bo'lgan xom ma'lumotlaringizni har doim tasavvur qilishingiz kerak va kerakli ma'lumotlarni o'zgartirish uchun komponentingizda mantiqni qo'llang. Keyin shabloningiz ma'lumotlarning ingl. Vakili bo'lib, foydalanuvchi kiritishiga asoslanib, bu ma'lumotni o'zgartirish uchun mantiqqa biriktiriladi.

    Shunday qilib, berilgan misolda, [class.active] = "current == 0", joriy o'zgaruvchining nol yoki yo'qligini asos qilib, faol sinfni qo'shish yoki olib tashlashni bildiradi.

    Va (klik) = "oldingi ()" bu tugmani bosish hodisasi tugatilganda sinfi oldingi usulni izlashni anglatadi.

    2
    qo'shib qo'ydi

    ng-class kodini

  • faol kodini joriy qilish uchun ishlatishingiz mumkin.

    HTML

    <div ng-controller="MainController as main">
      
    • item1
    • item2
    • item3
      <button class="prev" ng-click="main.back()">prev</button>
      <button class="next" ng-click="main.next()">Next</button>
    </div>
    

    Nazoratchi

    var app = angular.module('plunker', []);
    
    app.controller('MainController', function() {
    
      this.active = 1;
    
      this.max = 3;
    
      this.next = function(){
        this.active++;
        if(this.active > this.max) this.active = this.max;
      }
    
      this.back = function(){
        this.active--;
        if(this.active < 1) this.active = 1;
      }
    });
    

    http://plnkr.co/edit/7p6IxAnGstTWVsrrR8FX?p=preview

  • 1
    qo'shib qo'ydi
    Malumot berish uchun ehtiyot bo'lish kerakmi? Bilasizmi, har ikkala versiyani ham ishlataman va o'qitaman, shuning uchun farqni juda yaxshi bilaman.
    qo'shib qo'ydi muallif JB Nizet, manba
    OP o'ralgan 2 haqida emas, balki angularJS haqida emas.
    qo'shib qo'ydi muallif JB Nizet, manba
    Bu albatta burchakli 1.x
    qo'shib qo'ydi muallif snorkpete, manba
    Xo'sh, shundaymi? Bu angular2 vikidan chiqarildi ..... Mening xudoim
    qo'shib qo'ydi muallif driconmax, manba
    Angular Uzbekistan
    Angular Uzbekistan
    107 ishtirokchilar

    Guruh Angular bo'yicha muloqot qilish uchun ochilgan Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs

    Javascript UZB
    Javascript UZB
    99 ishtirokchilar

    @js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb

    ngTashkent
    ngTashkent
    77 ishtirokchilar

    Правила просты: 1. Не хамить 2. Не хейтить 3. Реакт не нужен Ссылки: https://t.me/angular_ru - старший брат https://t.me/angular_uz - ангулар на узбекском @js_uzb @vuejs_uz @react_uz @nodejs_uz @yiiframework_uz @uzdevgroup @UzDev_Jobs @tasdev_talks