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 class='ico-screen-pc'></i> </li> <li ng-click='displayModeData.choose_display(’projector’)'> <i class='ico-screen-projector'></i> </li> <li ng-click='displayModeData.choose_display(’tv’)'> <i 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>回答2：

<i class='{{selectedClass}}'> </i><ul ng-show='show_apparatus'> <li ng-click='$parent.selectedClass = icon.className' ng-repeat='icon in icons'><i class='{{icon.className}}'></i>asdadasd </li></ul>

$scope.icons = [ {title: ’PC显示屏’, className: ’ico-screen-pc’}, {title: ’投影仪’, className: ’ico-screen-projector’}, {title: ’TV显示屏’, className: ’ico-screen-tv’}];$scope.selectedClass = $scope.icons[0].className;