Home  >  Q&A  >  body text

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

请教大家 我的哪部分写错了呢?

曾经蜡笔没有小新曾经蜡笔没有小新2693 days ago886

reply all(2)I'll reply

  • PHPz

    PHPz2017-05-15 17:05:12

    Come on, change it according to mine:

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

    reply
    0
  • 某草草

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

    <i class="{{selectedClass}}"> </i>
    <ul ng-show="show_apparatus">
        <li ng-click="$parent.selectedClass = icon.className" ng-repeat="icon in icons">
            <i title="{{icon.title}}" 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;

    reply
    0
  • Cancelreply