Active class 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

) (

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

및 getStyle에 대해 하나 개의 기능을 추가 아래처럼 HTML에서 "및 getStyle (person.id)"을 데이터 NG 스타일 = 추가; 선택한 사람 ID의 배경색을 반환하는 JS 코드의.

   //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(); 
       }