Как активировать ng-класс только на одном элементе?

Question

У меня есть ng-repeat и ng-class для каждого элемента. Я использую его для выбора элементов (добавить границы для выбранных).

<div class="main-block_channel_create">
<section class="parent_messageList cancelDelete">
    <div id="section_animate" class="messagesList_block cancelDelete" infinite-scroll='messagelist.nextSet()' infinite-scroll-listen-for-event='anEvent' infinite-scroll-distance='100'>
        <!-- User Images List -->
        <a href="" class="messageBl message_preview animated" ng-repeat='preview in messagelist.previewList'>
            <div class="image_container_preview" ng-class="{community_select: item.isSelected}" ng-click='communitySelect(preview)' attr="{{preview.preview_id}}">
                <img class="deleteMessageBtn" src="images/close_icon.svg" ng-click="deleteMessage(preview.message_id)">
                <div class="spinner_container">
                    <!--<img src="/images/logo-80.svg" class='spinner_img'>-->
                    <img class="spinner_logo_vertical" src="images/logo_vertical-part.svg" alt="">
                    <img class="spinner_logo_left" src="images/logo_left-part.svg" alt="">
                    <img class="spinner_logo_right" src="images/logo_right-part.svg" alt="">
                </div>
                <img class="message_preview-image" src="{{preview.image}}" alt="">
                <!--  Tсли нет изображения — показываем текст -->
                <div class="message_preview-text MediumNormalJunior" ng-if="!preview.image">
                    <div class="message_preview-text-inner" ng-if='preview.name'>
                        {{preview.name}}
                    </div>
                    <!-- если нету и текста показываем empty-->
                </div>
                <div class="empty_message" ng-if='!preview.text && !preview.image'>
                     <!--<h4>Empty</h4> -->
                </div>
            </div>
            <div class="stats" ng-show='preview.total_score > 0'>
                <p>{{preview.total_score}}</p>
            </div>
        </a>
        <footer class="listFooter">

        </footer>
    </div>
</section>

sass

.community_select
    border: 3px solid white

Директива

(function(){
    'use strict';

angular
    .module('buzz')
    .directive('channelcreate', channelcreate);

function channelcreate($rootScope, $location, $timeout, $cookies, $window, communityApiService, getCommunities){

    return{
        restrict: "E",
        replace: true,
        scope: true,
        templateUrl: '/templates/channelCreate/channelCreate.html',
        link: function($scope){
            // $rootScope.showChannelCreate = null;

            // Select communities for create new channel
            $scope.communityList = [];
            $scope.communitySelect = function(communityId){
                $scope.selected = false;
                if ($scope.communityList.indexOf(communityId) == -1){
                    $scope.communityList.push(communityId);

                } else {
                    $scope.communityList.pop(communityId)
                }

                console.log($scope.communityList);
            };

            // all messages preview are loaded from messagesLoadFactory
            $scope.messagelist = new getCommunities();

        }
    };
};

})();

Я могу идентифицировать каждое деление по id при нажатии на него. Как я могу изменить только один элемент, но не все?

Answer 1

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

HTML

У меня есть и ng-repeat и ng-class для каждого элемента. Я использую его для выбора элементов (добавить границу для выбранных).

<a href="" class="messageBl message_preview animated" 
  ng-repeat='preview in messagelist.previewList'>
    <div class="image_container_preview" 
     ng-class="{community_select: item.isSelected}" 
     ng-click='communitySelect(preview)' 
     attr="{{preview.preview_id}}">
</a>

код

$scope.communitySelect = function(communityId) {
  item.isSelected = !item.isSelected;
};

И всякий раз, когда вам нужен список выбранных предварительных просмотров, вы можете легко перебрать коллекцию previews и выбрать тех, у кого установлен флажок isSelected.

var selected = $scope.previews.map(i => i.isSelected);

Answer 2

После входа в систему ... можно проверить, есть ли идентификатор элемента в списке выбранных элементов с помощью communityList.indexOf(preview.id) != -1, чтобы ваш ng-class выглядел так:

ng-class="{community_select: communityList.indexOf(preview.id) != -1}"

Редактировать

Кроме того, при удалении id из $scope.communityList убедитесь, что вы сначала нашли его индекс, а затем удалили его с помощью splice.

Теперь часть для удаления / добавления id будет выглядеть так:

// ... content omitted
$scope.communitySelect = function(communityId) {
  $scope.selected = false;
  var index = $scope.communityList.indexOf(communityId);
  if (index == -1) {
    $scope.communityList.push(communityId);
  } else {
    $scope.communityList.splice(index, 1)
    //                          ^^^    ^
    //        remove    starting_here  one_element
  }

  console.log($scope.communityList);
};
// ... content omitted