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

在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()添加一个函数，以返回所选人员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();
                }