Multi Selection с использованием Angular JS

Question

Multi Selection с использованием Angular JS

0

У меня есть требование в AngularJS on Multi Select.

У меня есть два всплывающих окна с несколькими выборами, и мне нужно передать данные между ними через 3 кнопки. Я попробовал выборку в JSFiddle, но мне не удалось добиться успеха. Подробности см. В приведенной ниже ссылке.

Ссылка здесь

HTML-код

<div ng-controller="MyCtrl"><select multiple="true" ng-model="selectedDetails" ng-options="c.name+' ('+c.id+')' for c in rule"></select>
<button ng-click='moveSelectedToRight(selectedDetails)'>></button>
 <button ng-click='moveAllSelected(selectedDetails)'>>></button>
<button ng-click='moveSelectedToLeft(selectedDetails)'><</button>
<select multiple="true" ng-model="selectedDetailsCopied" ng-options="c.name+' ('+c.id+')' for c in selectedDetailsCopied"></select>
<div>
    <p>Selected Details: {{selectedDetails }}</p>
    <p>Copied Details: {{selectedDetailsCopied}}</p>
</div>

JS CODE

    var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.selectedDetails = [];
    $scope.selectedDetailsCopied=[];
    $scope.rule = [{
        name: 'Rock',
        id: '0'},
    {
        name: 'white',
        id: '1'},
    {
        name: 'Test',
        id: '2'},
    {
        name: 'Fun',
        id: '3'},
    {
        name: 'Laaa',
        id: '4'
    }];
$scope.moveSelectedToRight = function(selectedDetails){
        $scope.selectedDetailsCopied = angular.copy(selectedDetails);
    }
    $scope.moveAllSelected = function(selectedDetails){
        $scope.selectedDetailsCopied = angular.copy($scope.rule);
    }
     $scope.moveSelectedToLeft = function(selectedDetails){
        $scope.selectedDetailsCopied = [];
    }


}

Kartheek s 27 окт. 2015, в 12:46

Источник

0

В чем вопрос ?
Reza 27 окт. 2015, в 11:35
0

Я не смог переместить контент из одного ящика в другой
Kartheek s 27 окт. 2015, в 12:08
0

Но ваша скрипка (может быть, они пропустили включение углового файла JS) работает! Вы получили какую-либо ошибку ??
Reza 27 окт. 2015, в 12:10
0

Я смог запустить мой фрагмент кода. Но после обмена кодом он не был правильно скомпилирован. Пожалуйста, используйте вышеуказанный код для ссылки @Reza
Kartheek s 27 окт. 2015, в 12:27

Показать ещё 2 комментария

Теги:

javascript

jquery

html

angularjs

1 ответ

Ещё вопросы

Я не смог переместить контент из одного ящика в другой
Но ваша скрипка (может быть, они пропустили включение углового файла JS) работает! Вы получили какую-либо ошибку ??
Я смог запустить мой фрагмент кода. Но после обмена кодом он не был правильно скомпилирован. Пожалуйста, используйте вышеуказанный код для ссылки @Reza

Emir Marques · Accepted Answer · 2015-10-27T11-04-00.000Z

Посмотрите это

var myApp = angular.module('myApp', []);

    function MyCtrl($scope) {
        $scope.selectedDetails = [];
        $scope.selectedDetailsCopied = [];
        $scope.rule = [{
               name: 'Rock',
               id: '0'},
           {
               name: 'white',
               id: '1'},
           {
               name: 'Test',
               id: '2'},
           {
               name: 'Fun',
               id: '3'},
           {
               name: 'Laaa',
               id: '4'
           }];
                        
            $scope.moveSelectedToRight = function(){
                angular.forEach($scope.selectedDetails, function(value, key) {
                    var indexEl = $scope.geIndex($scope.rule, value);
                    $scope.selectedDetailsCopied.push($scope.rule[indexEl]);
                });

                angular.forEach($scope.selectedDetails, function(value, key) {
                    var indexEl = $scope.geIndex($scope.rule, value);
                    $scope.rule.splice(indexEl, 1);
                });
                
                while($scope.selectedDetails.length > 0)
                    $scope.selectedDetails.splice(0, 1);
            }
            $scope.moveAllSelected = function(){
                angular.forEach($scope.rule, function(value, key) {
                    $scope.selectedDetailsCopied.push(value);
                });

                while($scope.rule.length > 0)
                    $scope.rule.splice(0, 1);
            }
            $scope.moveSelectedToLeft = function(){
                angular.forEach($scope.selectedDetailsMoved, function(value, key) {
                    var indexEl = $scope.geIndex($scope.selectedDetailsCopied, value);
                    $scope.rule.push($scope.selectedDetailsCopied[indexEl]);
                }); 

                angular.forEach($scope.selectedDetailsMoved, function(value, key) {
                    var indexEl = $scope.geIndex($scope.selectedDetailsCopied, value);
                    $scope.selectedDetailsCopied.splice(indexEl, 1);
                });  
            }
            
            $scope.geIndex = function(arr, idElement){
                var itemIndex = {};
                angular.forEach(arr, function(value, key) {
                    if(value.id == idElement || value == idElement){
                        itemIndex = key;
                        return false;
                    }
                });
                return itemIndex;
            }
        }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
    
    <select multiple="true" ng-model="selectedDetails" ng-options="c.id as c.name for c in rule"></select>
    <button ng-click='moveSelectedToRight(selectedDetails)'>></button>
    <button ng-click='moveAllSelected(selectedDetails)'>>></button>
    <button ng-click='moveSelectedToLeft(selectedDetailsMoved)'><</button>
    <select multiple="true" ng-model="selectedDetailsMoved" ng-options="c.id as c.name for c in selectedDetailsCopied"></select>
    <div>
        <p>Selected Details: {{selectedDetails }}</p>
        <p>Copied Details: {{selectedDetailsCopied}}</p>
    </div>
</div>

Спасибо за ваш ответ и небольшая проблема в том, что я не смог переместить несколько предметов с обеих сторон.
Посмотри сейчас. Я редактирую свой пример