Обновить конкретный объект в ng-классе

Question

Я заинтересован в обновлении определенного объекта в ng-классе, так как мое представление содержит много объектов, из которых я хочу применить обновление к определенному объекту из цикла.

 <div>
            <div class="baseMap">
                <i ng-repeat="society in societyImage"
                   class="icon box"
                   ng-class="{ 'bigger': society.bigger }"
                   ng-style="{'background-image': 'url(' + society.imageUrl + '.png)', 'top':+ society.top, 'left':+ society.left}"
                        ng-click="showAlert($index)"></i>

            </div>

        </div>

/// Кнопка Click index animateMapItem($index);

Моя функция JS

var self = $scope;

    self.bigger = false;
    self.lightTheme = false;

    $scope.animateMapItem = function (index) {

        //self.bigger = !self.bigger;

        var listTitle = $scope.listItem[index].indicatorEn;

        var _societyObj = [];
        _societyObj = _.where($scope.societyImage, {'indicationEn':listTitle});

        $log.log(_societyObj);

        _societyObj.bigger = true;

    };

Мой CSS

.baseMap .icon {
        position: absolute;
        background-size: 100% 100%;
        width: 40px;
        height: 40px;
        display: block;

    }

.box {
        -webkit-transition:all linear 0.5s;
        transition:all linear 0.5s;
    }

    .box.bigger {
        width: 60px;
        height: 60px;
    }

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

Answer 1

_societyObj это локальный объект, который вы не можете использовать в качестве части представления в html. Сделайте это как объект области видимости, тогда только вы можете использовать его как часть представления html. Измените весь локальный объект, используемый в части представления, на объект $scope. В противном случае ваш код не работает, как вы ожидаете

Но $scope.animateMapItem функция всегда возвращает истину, почему??? это не имеет никакого смысла

$scope будет передаваться только между контроллером и частью представления, его двухсторонняя привязка

$scope.societyObj = [];
$scope.societyObj.bigger = true;

иначе вернуть _societyObj в конце функции, которая должна быть

$scope.animateMapItem = function (index) {

        //self.bigger = !self.bigger;

        var listTitle = $scope.listItem[index].indicatorEn;

        var _societyObj = [];
        _societyObj = _.where($scope.societyImage, {'indicationEn':listTitle});

        $log.log(_societyObj);

        _societyObj.bigger = true;

        return _societyObj.bigger; // it always return true it doesn't make any sense

    };

В вашем HTML

<div class="baseMap">
                <i ng-repeat="society in societyImage"
                   class="icon box"
                   ng-class="{ 'bigger': animateMapItem($index) }"
                   ng-style="{'background-image': 'url(' + society.imageUrl + '.png)', 'top':+ society.top, 'left':+ society.left}"
                        ng-click="showAlert($index)"></i>

            </div>