Обновление определенного объекта по 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); Функция

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