angular.js - Klik acara dalam Angularjs lulus parameter untuk menukar gaya kelas.

Question

Gambar yang anda ingin capai adalah seperti berikut:

Sekarang saya telah melaksanakan bentuk dan fungsi asas, tetapi apabila saya mengklik pada ikon dan menukar ikon di sebelah "Peranti Disesuaikan", fungsi ini tidak menghasilkan hasil yang diharapkan.
Sila beritahu saya bahagian mana yang saya salah tulis?

1. Berikut ialah ikon yang akan digantikan dengan mengklik ikon dalam kotak lungsur yang berbeza di sebelah "Peranti Disesuaikan".
(Ini adalah fungsi yang saya ingin capai.)

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

2. Bahagian ini berada dalam kotak lungsur Anda boleh mengklik pada ikon yang berbeza

<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. Bahagian ini ialah kod fungsi js

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

Sila beritahu saya bahagian mana dalam tulisan saya yang salah?

Answer 1

Di sini, tukar mengikut saya:

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

Answer 2

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