angulaire.js - L'événement Click dans Angularjs transmet les paramètres pour modifier le style de la classe.

Question

L'image que vous souhaitez obtenir est la suivante :

Maintenant, j'ai implémenté la forme et la fonction de base, mais lorsque je clique sur une icône et que je change l'icône à côté de « Appareils adaptés », cette fonction ne produit pas les résultats attendus.
S'il vous plaît, dites-moi quelle partie j'ai mal écrite ?

1. Voici les icônes qui seront remplacées en cliquant sur les icônes dans différentes listes déroulantes à côté de « Appareils adaptés ».
(C'est la fonction que je souhaite réaliser.)

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

2. Cette partie se trouve dans la liste déroulante. Vous pouvez cliquer sur différentes icônes

<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. Cette partie est le code de fonction de js

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

S'il vous plaît, dites-moi quelle partie de mon écriture est fausse ?

Answer 1

Tiens, change-le selon le mien :

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