問題描述

想要實現的圖如下：

現在我已經把基本形狀和功能實現了，可是點擊一個圖標，在“適配設備”旁更換圖標，這個功能沒有發生預期的結果。請教各位，我的那個部分寫錯的？

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;