アクティブクラスIonicV1

Question

こんにちはIonic v1で開発されたチャットアプリケーションページにユーザーリストがあります。

<div class="user-names"> 
    <div class="card hovercard" ng-controller="CommunicationController" ng-repeat="person in allUsers">   
<div class="ufor-pname"> 
     <button title= "{{person.name}}" id="firstUser" value="{{person.name}}" class="button button-dark fuser-btn all-time-fix" ng-click = "getChat('{{person.id}}','{{person.name}}','{{LoggedInUserId}}')"> 
      <img class="img-circle-main img-user" src="http://{{person.image}}" width="50px" height="50px">    
     </button> 
<span class="user1-name"> {{person.name}} </span> 
</div> 
    </div> 
</div> 

私は、ユーザーがあそこに与えられたリスト内のユーザーのいずれかをクリックする一方、アクティブクラスを追加します。

//Controller 

$scope.getChat = function (userIdFrom,messageFromName,LoggedInUserId) {  

$rootScope.userIdFrom = userIdFrom;  
$ionicLoading.show(); 
} 

助けてください。

ありがとうございます。

Answer 1

はデータ-ngのスタイル= "でgetStyle（person.id）"

<div class="user-names"> 
    <div class="card hovercard" ng-controller="CommunicationController" ng-repeat="person in allUsers">   
     <div class="ufor-pname" data-ng-style="getStyle(person.id)"> 
      <button title= "{{person.name}}" id="firstUser" value="{{person.name}}" class="button button-dark fuser-btn all-time-fix" ng-click = "getChat('{{person.id}}','{{person.name}}','{{LoggedInUserId}}')"> 
       <img class="img-circle-main img-user" src="http://{{person.image}}" width="50px" height="50px">    
      </button> 
      <span class="user1-name"> {{person.name}} </span> 
     </div> 
    </div> 
</div> 

以下のようなあなたのHTML内はでgetStyle（のための1つの機能を追加）を追加します。あなたのJSコードのを選択した人物IDの背景色を返します。

   //Function for set bakground color . 
       $scope.getStyle = function(person) { 
        $scope.Style = ''; 
        if ($rootScope.userIdFrom == person) { 
         $scope.Style = '#F8F7D9'; 
        } 
        return {'background-color': $scope.Style}; 
       } 

       $scope.getChat = function (userIdFrom, messageFromName, LoggedInUserId) { 
        $rootScope.userIdFrom = userIdFrom; 
        $ionicLoading.show(); 
       }