当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - using ng-class with angular $scope property

问题描述:

I have html structure

<div class="myDiv">

<div style="width:200px; height:200px;background-image:url('img/200x200/{{largeImg}}.png');"

ng-class="{'magictime foolishIn': 1}">

<span>

{{largeImg}}

</span>

</div>

</div>

using ng-class I want to apply css class to current element which will invoke certain animation on that element like here

css class is correctly applied when I look using firebug but animation is not invoked. When I replace this code with hardcoded values everything works

<div style="width:200px; height:200px;background-image:url('img/200x200/1.png');"

ng-class="{'magictime foolishIn': 1}">

<span>1</span>

</div>

from angularjs I'm using $scope.largeImg as property for binding on the view.

网友答案:
.myInnerDiv {
   width: 200px;
   height: 200px;
   height:200px;background-image:url('img/200x200/{{largeImg % 8}}.png');
}

First your content in 'style' property can be a CSS class like above. Also, if you want to trigger animation by adding a CSS class, you can just add it 'class' property like below.

<div class="myDiv">
<div class="myInnerDiv magictime foolishIn">
    <span>
        {{largeImg}}
    </span>

However, if you want to add it based on a flag, which gets updated by clicking a button, you can use 'ng-class' directive. Look at this JsFiddle.

Update: Based on OP's comments. The answer is updated in the JSFiddle

To achieve your functionality, you need to watch out for changes to your target value. I recommend writing a directive for this, since it is what the directives are for - to manipulate UI.

网友答案:

i think you can use ng-style

<div style="width:200px; height:200px;" 
     ng-style="{'background-image': 'url(img/200x200/{{ largeImg }}.png)'}"
     ng-class="{'magictime foolishIn': 1}">
分享给朋友:
您可能感兴趣的文章:
随机阅读: