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>

更新ng-class上的特定对象

1 个答案: