Skip to main content

Return to Question

deleted 1081 characters in body
Source Link
Bhrungarajni
Bhrungarajni
  • 2.5k
  • 12
  • 51
  • 111

JqeuryHTML:

$(function () {
    $('#agents-group-view').on('click', '.list-group<li .listclass="list-group-item', function () {
        $(this).toggleClass('active');
 item" *ngFor="let item });
of agentInView; let i=index" $('.list-arrows button').click(function () {
        var $button = $(this), actives = '';
        if ($button.hasClass="select('move-left')i)" [ngClass]="{
            actives = $('.list-right ul li.active');
        'active': selectedIndex == i, actives.clone().prependTo('.list'list-left ul.listgroup-group');
            actives.remove();
       item': true} else if ($button.hasClass('move-right')) ">{
            actives = $('.list-left ul li.active');
            actives.clone().prependTo('.list-right ul.list-group');
            actives{item.remove();
        value}
    });
    $('.swap-list .selector').click(function () {
        var $checkBox = $(this);
        if (!$checkBox.hasClass('selected')) {</li>

Ts:

   $checkBox.addClass('selected').closest('.well').findselectInView('ul liindex:not(.active)').addClass('active');
            $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check'number);
        } else {
            $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
            $checkBox.children('i').removeClass('glyphicon-check')this.addClass('glyphicon-unchecked');
      selectedinViewIndex = }index;
    });

Jqeury:

$(function () {
    $('#agents-group-view').on('click', '.list-group .list-group-item', function () {
        $(this).toggleClass('active');
    });
    $('.list-arrows button').click(function () {
        var $button = $(this), actives = '';
        if ($button.hasClass('move-left')) {
            actives = $('.list-right ul li.active');
            actives.clone().prependTo('.list-left ul.list-group');
            actives.remove();
        } else if ($button.hasClass('move-right')) {
            actives = $('.list-left ul li.active');
            actives.clone().prependTo('.list-right ul.list-group');
            actives.remove();
        }
    });
    $('.swap-list .selector').click(function () {
        var $checkBox = $(this);
        if (!$checkBox.hasClass('selected')) {
            $checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
            $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
        } else {
            $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
            $checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
        }
    });

HTML:

 <li class="list-group-item" *ngFor="let item of agentInView; let i=index" (click)="select(i)" [ngClass]="{'active': selectedIndex == i, 'list-group-item': true}">{{item.value}}</li>

Ts:

   selectInView(index: number) {
      this.selectedinViewIndex = index;
  }
added 76 characters in body
Source Link
Bhrungarajni
Bhrungarajni
  • 2.5k
  • 12
  • 51
  • 111

i have 2 set of arrays, one in Group and the other List Not in group. I have 2 buttons, move to right and move to left, so on click of them, the selected data must move to right or to left based on button we select. Here multiple selection of data in list should also be implemented. I have used jQuery but it didnt worked with array of data binded, and the selected linklist also didnt get active in the class, in html., and here multiple list selection is not happening, one at a time is working

Without using jquery how can this be implemented.

DEMO: DEMO

Jqeury:

$(function () {
    $('#agents-group-view').on('click', '.list-group .list-group-item', function () {
        $(this).toggleClass('active');
    });
    $('.list-arrows button').click(function () {
        var $button = $(this), actives = '';
        if ($button.hasClass('move-left')) {
            actives = $('.list-right ul li.active');
            actives.clone().prependTo('.list-left ul.list-group');
            actives.remove();
        } else if ($button.hasClass('move-right')) {
            actives = $('.list-left ul li.active');
            actives.clone().prependTo('.list-right ul.list-group');
            actives.remove();
        }
    });
    $('.swap-list .selector').click(function () {
        var $checkBox = $(this);
        if (!$checkBox.hasClass('selected')) {
            $checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
            $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
        } else {
            $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
            $checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
        }
    });

i have 2 set of arrays, one in Group and the other List Not in group. I have 2 buttons, move to right and move to left, so on click of them, the selected data must move to right or to left based on button we select. Here multiple selection of data in list should also be implemented. I have used jQuery but it didnt worked with array of data binded, and the selected link also didnt get active in the class, in html.

Without using jquery how can this be implemented.

DEMO: DEMO

Jqeury:

$(function () {
    $('#agents-group-view').on('click', '.list-group .list-group-item', function () {
        $(this).toggleClass('active');
    });
    $('.list-arrows button').click(function () {
        var $button = $(this), actives = '';
        if ($button.hasClass('move-left')) {
            actives = $('.list-right ul li.active');
            actives.clone().prependTo('.list-left ul.list-group');
            actives.remove();
        } else if ($button.hasClass('move-right')) {
            actives = $('.list-left ul li.active');
            actives.clone().prependTo('.list-right ul.list-group');
            actives.remove();
        }
    });
    $('.swap-list .selector').click(function () {
        var $checkBox = $(this);
        if (!$checkBox.hasClass('selected')) {
            $checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
            $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
        } else {
            $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
            $checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
        }
    });

i have 2 set of arrays, one in Group and the other List Not in group. I have 2 buttons, move to right and move to left, so on click of them, the selected data must move to right or to left based on button we select. Here multiple selection of data in list should also be implemented. I have used jQuery but it didnt worked with array of data binded, and the selected list also didnt get active in the class, in html, and here multiple list selection is not happening, one at a time is working

Without using jquery how can this be implemented.

DEMO: DEMO

Jqeury:

$(function () {
    $('#agents-group-view').on('click', '.list-group .list-group-item', function () {
        $(this).toggleClass('active');
    });
    $('.list-arrows button').click(function () {
        var $button = $(this), actives = '';
        if ($button.hasClass('move-left')) {
            actives = $('.list-right ul li.active');
            actives.clone().prependTo('.list-left ul.list-group');
            actives.remove();
        } else if ($button.hasClass('move-right')) {
            actives = $('.list-left ul li.active');
            actives.clone().prependTo('.list-right ul.list-group');
            actives.remove();
        }
    });
    $('.swap-list .selector').click(function () {
        var $checkBox = $(this);
        if (!$checkBox.hasClass('selected')) {
            $checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
            $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
        } else {
            $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
            $checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
        }
    });
Source Link
Bhrungarajni
Bhrungarajni
  • 2.5k
  • 12
  • 51
  • 111

How to make the list of data move from one array to other using angular8

i have 2 set of arrays, one in Group and the other List Not in group. I have 2 buttons, move to right and move to left, so on click of them, the selected data must move to right or to left based on button we select. Here multiple selection of data in list should also be implemented. I have used jQuery but it didnt worked with array of data binded, and the selected link also didnt get active in the class, in html.

Without using jquery how can this be implemented.

DEMO: DEMO

Jqeury:

$(function () {
    $('#agents-group-view').on('click', '.list-group .list-group-item', function () {
        $(this).toggleClass('active');
    });
    $('.list-arrows button').click(function () {
        var $button = $(this), actives = '';
        if ($button.hasClass('move-left')) {
            actives = $('.list-right ul li.active');
            actives.clone().prependTo('.list-left ul.list-group');
            actives.remove();
        } else if ($button.hasClass('move-right')) {
            actives = $('.list-left ul li.active');
            actives.clone().prependTo('.list-right ul.list-group');
            actives.remove();
        }
    });
    $('.swap-list .selector').click(function () {
        var $checkBox = $(this);
        if (!$checkBox.hasClass('selected')) {
            $checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
            $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
        } else {
            $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
            $checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
        }
    });