Angularjs of class 在多个 class 之间切换
Angularjs ng-class toggle between several classes
对于你们中的一些人来说,这可能是一个简单的问题。
<div class="component"
ng-class="{'small': small, 'medium': medium, 'large': large, 'xlarge': xlarge}"
ng-if="component.title == 'Heading'"
ng-init="editing = false; small = false; medium = false; large = false; xlarge = false">
<input class="heading" ng-blur="editing = false" ng-hide="!editing" type="text" placeholder="Heading" ng-model="component.element" />
<h2 ng-click="editing = true" ng-hide="editing">{{component.element}}</h2>
<div ng-hide="!editing" class="textEditor">
<ul>
<li>
<a href="" ng-click="small = true">
<span class="icon-size small"></span>
</a>
</li>
<li>
<a href="" ng-click="medium = true">
<span class="icon-size medium"></span>
</a>
</li>
<li>
<a href="" ng-click="large = true">
<span class="icon-size large"></span>
</a>
</li>
<li>
<a href="" ng-click="xlarge = true">
<span class="icon-size xlarge"></span>
</a>
</li>
</ul>
</div>
</div>
我需要添加 class 到 .component 基于点击无序列表中的标签。如果单击第一个项目,我需要将 class small 添加到 .component,然后如果单击另一个项目,我需要删除 small class 并从该 A 标签添加相应的 class。
目前它添加了 classes 但没有删除之前添加的那些。
基本上我需要在它们之间创建一种切换 4 classes
尝试:
ng-class="small ? 'small' : medium ? 'medium' : large: 'large : xlarge ? 'xlarge' : ''"
我会说使用单独的变量 customClass
ng-class="customClass"
然后标记
<ul>
<li>
<a href="" ng-click="customClass = 'small'">
<span class="icon-size small"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'medium'">
<span class="icon-size medium"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'large'">
<span class="icon-size large"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'xlarge'">
<span class="icon-size xlarge"></span>
</a>
</li>
</ul>
对于你们中的一些人来说,这可能是一个简单的问题。
<div class="component"
ng-class="{'small': small, 'medium': medium, 'large': large, 'xlarge': xlarge}"
ng-if="component.title == 'Heading'"
ng-init="editing = false; small = false; medium = false; large = false; xlarge = false">
<input class="heading" ng-blur="editing = false" ng-hide="!editing" type="text" placeholder="Heading" ng-model="component.element" />
<h2 ng-click="editing = true" ng-hide="editing">{{component.element}}</h2>
<div ng-hide="!editing" class="textEditor">
<ul>
<li>
<a href="" ng-click="small = true">
<span class="icon-size small"></span>
</a>
</li>
<li>
<a href="" ng-click="medium = true">
<span class="icon-size medium"></span>
</a>
</li>
<li>
<a href="" ng-click="large = true">
<span class="icon-size large"></span>
</a>
</li>
<li>
<a href="" ng-click="xlarge = true">
<span class="icon-size xlarge"></span>
</a>
</li>
</ul>
</div>
</div>
我需要添加 class 到 .component 基于点击无序列表中的标签。如果单击第一个项目,我需要将 class small 添加到 .component,然后如果单击另一个项目,我需要删除 small class 并从该 A 标签添加相应的 class。
目前它添加了 classes 但没有删除之前添加的那些。
基本上我需要在它们之间创建一种切换 4 classes
尝试:
ng-class="small ? 'small' : medium ? 'medium' : large: 'large : xlarge ? 'xlarge' : ''"
我会说使用单独的变量 customClass
ng-class="customClass"
然后标记
<ul>
<li>
<a href="" ng-click="customClass = 'small'">
<span class="icon-size small"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'medium'">
<span class="icon-size medium"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'large'">
<span class="icon-size large"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'xlarge'">
<span class="icon-size xlarge"></span>
</a>
</li>
</ul>