angular.js - Angularjs中点击事件传递参数 给class更换样式。
本文介绍了angular.js - Angularjs中点击事件传递参数 给class更换样式。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
想要实现的图如下:
现在我已经把基本形状和功能实现了,可是点击一个图标,在适配设备旁更换图标,这个功能没有发生预期的结果。
请教各位,我的那个部分写错的?
1、这里是适配设备旁边点击不同下拉框中的图标会被替换的图标。
(就是我想要实现的功能。)
<i
ng-class="{' ico-screen-pc':pc,
' ico-screen-projector':projector,
' ico-screen-tv':tv}">
</i>
2、这部分是下拉框中 可以点击不同图标
<ul ng-show="show_apparatus">
<li ng-click="displayModeData.choose_display('pc')">
<i title="PC显示屏" class="ico-screen-pc"></i>
</li>
<li ng-click="displayModeData.choose_display('projector')">
<i title="投影仪" class="ico-screen-projector"></i>
</li>
<li ng-click="displayModeData.choose_display('tv')">
<i title="TV显示屏" class="ico-screen-tv"></i>
</li>
</ul>
3、这部分是js 的函数代码
$scope.pc = true;
$scope.displayModeData = {
pc: true,
choose_display : function( displayMode ){
$scope.pc = ( displayMode === 'pc' );
$scope.projector = ( displayMode === 'projector' );
$scope.tv = ( displayMode === 'tv' );
}
};
请教大家 我的哪部分写错了呢?
解决方案
来,按我的改:
$scope.displayModeData = {
pc: true,
choose_display : function( displayMode ){
$scope.displayMode = displayMode;
}
};
<i
ng-class="{' ico-screen-pc':displayMode === 'pc',
' ico-screen-projector': displayMode === 'projector',
' ico-screen-tv': displayMode === 'tv'}">
</i>
这篇关于angular.js - Angularjs中点击事件传递参数 给class更换样式。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文