0

I am interested in updating specific object on ng-class as my view is containing many objects out of which I want to apply update on specific object from the loop.

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

/// Button Click index animateMapItem($index);


My JS function

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;

    };

My 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;
    }

Now it is updating all item to bigger, where as I want to update specific item on button click

4

1 回答 1

1

_societyObj is a local object you cannot use it the view part in html. Make it as scope object then only you could use it the html view part. Change all local object used in the view part into $scope object. Otherwise Your code not works as per you expect

But the $scope.animateMapItem function always return true why???it does not make any sense

$scope only be communicated between the controller and the view part its two way binding

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

else return the _societyObj in the end of the function that should be

$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

    };

In your 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>
于 2015-07-13T06:23:08.073 回答