Angular-js: How to use of ng-click with ng-if

Question

I have created a chatbox in angular JS and now I want to show notification bubble when ever I click on any user. I tried to use this with ng-click and and ng-if but failed. Here is the code I am using

     <div class="people"  >
            <div ng-repeat="user in allCompanyUsers">
                <div class="person" ng-click="activateChat(user)" id="chat_{{user.id}}">
                    <img alt="" />
                    <span class="name" >{{user.firstName}} {{user.lastName}}
                    <span   ng-show="!user.showNotification" class="noti_bubble">5</span> 


                    <span class="preview"></span>
                </div>
            </div>
        </div>

And on controller side:

    $scope.showNotification = false;

    $scope.allCompanyUsers = AllCompanyUsers.query();

    $scope.activateChat = function(user){
        console.log(user);

        $scope.activeConversations = [];
        UserMessages.query({toUser:user.login}).$promise.then(function(data) {
               angular.forEach(data, function(message) {
                   $scope.activeConversations.push({'message':message.message,'type':message.type, 'time': message.time});
               });
        });

        $scope.activePerson=user.login;
        $scope.showNotification = true;
        $scope.isDisabled=true;
            /*$scope.activeConversations=user.chat;*/
        $('.left .person').removeClass('active');
        var el = angular.element( document.querySelector('#chat_'+user.id));
        el.addClass('active');   
    };

Currently the count is hardcoded. Here All users are showing with 5 bubble but I want that only selected user will show the bubble...

any kind of help is appreciated. Thanks in advance

Could you provide the implementation of the activateChat( ) function? — kyiu
– kyiu, Commented Apr 18, 2016 at 8:53

Walfrat · Accepted Answer · 2016-04-18 08:58:23Z

5

If you wabt to use it with ng-if :

<div ng-if="bubble">
    //bubble code : set bubble to false when it close
    // use currentUser variable
</div>

<button ng-click="currentUser = user;bubble=true"></button>

Note that i changed div by button for ng-click, because i'm not sure whetver div element support click event, so go for button or a or select tag.

answered Apr 18, 2016 at 8:58

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felipe · Accepted Answer · 2016-04-18 08:59:19Z

0

I think one option is to set a property for your view model called selected. In your Angular controller, when you click on a user, you should set the value of this property to true.

$scope.user.selected = true;

And only show the bubble count associated to that specific user if it has been selected

<span ng-show="user.selected" class="noti_bubble">{{user.bubbleCount}}</span>

answered Apr 18, 2016 at 8:59

Felipe

1,14911 silver badges18 bronze badges

Comments

Wasiq Muhammad · Accepted Answer · 2016-04-18 09:26:43Z

0

Try this

<div class="people"  >
            <div ng-repeat="user in allCompanyUsers">
                <div class="person" ng-click="activateChat(user)" id="chat_{{user.id}}">
                    <img alt="" />
                    <span class="name" >{{user.firstName}} {{user.lastName}}
                    <span ng-class="user != 0 ? 'noti_bubble' : ''"</span> 
                    <span class="preview"></span>
                </div>
            </div>
        </div>

answered Apr 18, 2016 at 9:26

Wasiq Muhammad

3,1483 gold badges19 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular-js: How to use of ng-click with ng-if

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related