搜尋

首頁  >  問答  >  主體

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' );
            }
        };

請教大家 我的哪一部分寫錯了呢?

曾经蜡笔没有小新曾经蜡笔没有小新2742 天前913

全部回覆(2)我來回復

  • PHPz

    PHPz2017-05-15 17:05:12

    來,按我的改:

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

    回覆
    0
  • 某草草

    某草草2017-05-15 17:05:12

    雷雷 雷雷

    回覆
    0
  • 取消回覆