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

我想添加活动 class，而用户将单击那里给出的列表中的任何用户。

//Controller

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

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

我们将不胜感激。

提前致谢。

Answer 1

在您的 HTML 中添加 data-ng-style="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>

在您的 JS 代码中为 getStyle(); 添加一个函数，用于 return 选定人员 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();
                }

活动 class IonicV1

Active class IonicV1

angularjs

ionic-v1