問(wèn)題描述

想要實(shí)現(xiàn)的圖如下：

現(xiàn)在我已經(jīng)把基本形狀和功能實(shí)現(xiàn)了，可是點(diǎn)擊一個(gè)圖標(biāo)，在“適配設(shè)備”旁更換圖標(biāo)，這個(gè)功能沒(méi)有發(fā)生預(yù)期的結(jié)果。請(qǐng)教各位，我的那個(gè)部分寫錯(cuò)的？

1、這里是“適配設(shè)備”旁邊點(diǎn)擊不同下拉框中的圖標(biāo)會(huì)被替換的圖標(biāo)。（就是我想要實(shí)現(xiàn)的功能。）

<i ng-class='{’ ico-screen-pc’:pc, ’ ico-screen-projector’:projector， ’ ico-screen-tv’:tv}'></i>

2、這部分是下拉框中 可以點(diǎn)擊不同圖標(biāo)

<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 的函數(shù)代碼

$scope.pc = true;$scope.displayModeData = { pc: true, choose_display : function( displayMode ){$scope.pc = ( displayMode === ’pc’ );$scope.projector = ( displayMode === ’projector’ );$scope.tv = ( displayMode === ’tv’ ); }};

請(qǐng)教大家 我的哪部分寫錯(cuò)了呢？

問(wèn)題解答

來(lái)，按我的改：

$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;