更新 ng-class 上的特定对象

Question

我有兴趣更新 ng-class 上的特定对象，因为我的视图包含许多对象，我想从循环中对特定对象应用更新。

 <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>

/// 按钮点击索引 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 函数总是返回 true 为什么???它没有任何意义

$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>