Обновите простой выбор / отмена выбора в правильный массив, который я могу вызвать - PullRequest
Новая
       21

Обновите простой выбор / отмена выбора в правильный массив, который я могу вызвать

0 голосов
/ 01 мая 2018

У меня есть ng-repeat, который показывает список элементов, которые пользователь может «выбрать», и я использую следующий код (упрощенный пример) для процесса выбора 

<div class="panel" ng-class="{'titleSelected': titleSelected[$index]}" ng-repeat="item in listofitems">
<h1>{{item.name}}</h1>
<button class="btn btn-success" ng-click="titleSelected[$index] = !titleSelected[$index]">
<span ng-hide="titleSelected[$index]">Add to Buy List</span>
<span ng-show="titleSelected[$index]">Remove from Buy List</span>
</button>
</div>

Теперь это работает нормально (у меня также было это с использованием item.id для отслеживания, а не $ index. Я щелкаю элемент, фон меняет цвет благодаря ng-классу, и кнопка динамически превращается в кнопку удаления

Однако я ожидал, что titleSelected будет массивом хранимой информации, но я был явно неправ. Что мне действительно нужно, так это живой массив, который хранит / удаляет item.id по клику, и я подошел ко всему этому неправильно.

Также, когда я использую фильтры (не показанные в коде), если какой-либо элемент выбирается, а затем скрывается фильтрами ... и возвращается, он теряет свой статус "выбранный".

Это касается и $ index, и item.id

Я подозреваю, что требуются небольшие функции с push и splice, но мне также все еще нужна простая функциональность добавления удаления на месте. и в полной синхронизации с тем, что было фактически выбрано

Любые указатели оценены

РЕДАКТИРОВАТЬ 1: Хорошо, просто добавив 

$scope.titleSelected = [];

в мой контроллер, и с помощью item.id вместо $ index мое приложение теперь 1) запоминает выбранные элементы между изменениями фильтра И создает массив, к которому я могу обращаться. Однако массив содержит (при первом выборе) запись для каждого отдельного элемента.

Итак, у меня 503 элемента, и при первом щелчке длина массива переходит к 912 (не знаю, откуда взялась эта цифра) .. большинство из которых являются нулевыми, но если я нажимаю на элемент с id = 4, то четвертый запись становится истинной, т.е. 

null,null,null,true,null...

1 Ответ

0 голосов
/ 01 мая 2018

Выполнено с помощью нескольких функций, связанных с щелчком мыши 

$scope.basket=[];

$scope.addToBasket = function(item) {
    $scope.basket.push(item);
};

$scope.removeFromBasket = function(item) {
    var index = $scope.basket.indexOf(item);
    if (index > -1) {
        $scope.basket.splice(index, 1);
    }
};

и в HTML 

<button ng-hide="titleSelected[item.id]" class="btn btn-success" 
ng-click="addToBasket(item.id);titleSelected[item.id] = !titleSelected[item.id]">
          Add to Buy List
        </button>

<button ng-show="titleSelected[item.id]" class="btn btn-success" 
ng-click="removeFromBasket(item.id);titleSelected[item.id] = !titleSelected[item.id]">
              Remove from Buy List
            </button>
...