Установка динамических переменных области видимости в AngularJs

Question

Это мое первое время с AngularJs. У меня проблема с настройкой выражения в ng-style Я пытаюсь установить выражение в ng-style с помощью item.variable_name

    <div class="col-lg-4" ng-repeat="item in MenuModel"
         ng-style="item.variable_name"
         ng-mouseover="onMouseOver(item.color,item.variable_name)" >
        <div class="col-md-12 sub-menu" ng-click="clickmenu(item.id)" >
            <div class="row">
                <div class="col-xs-3 menu-icon" style="background-color:{{item.color}};" >
                    <img class="img-icon" src="~/Resources/{{item.icon}}" />
                </div>
                <div class="col-xs-9" style="display:inline-block">
                    <h3 style="color:{{item.color}};">{{item.menu_name_th}}</h3>
                </div>
            </div>
        </div>
    </div>
</div>

добавить стиль в Anglar. js вот так

$scope.onMouseOver = function (color, variable_name) {

   $scope.variable_name = {
      'box-shadow': "0 4px 8px 0 " + color + ", 0 6px 20px 0 rgba(0, 0, 0, 0.19) "
   };

}

Я думаю, что метод настройки $scope.variable_name - неправильный путь. У вас есть предложение для меня? Спасибо

Answer 1

Вам нужно изменить item.variable_name, а не $scope.variable_name. Передайте элемент в функцию и затем измените variable_name:

$scope.onMouseOver = function (item) {
    item.variable_name = { 'box-shadow': "0 4px 8px 0 " + item.color + ", 0 6px 20px 0 rgba(0, 0, 0, 0.19) " };
}

ng-mouseover="onMouseOver(item)"