Angularjs: how change icon when item is clicked

Question

I know that this question has already some answers/solutions but none of them works for me most probably because this is the first time when I'm trying to implement something using Angularjs.

I have a div (title) that expands some info when it's clicked and I want to change the icon inside of it when that info is visible...

This is my code:

<div class="title" ng-click="view_variables(request)">
    <i class="glyphicon glyphicon-chevron-right"></i>
</div>

And this is what I tried to do, but not working because the div will not show the expanded info anymore:

<div class="title" ng-click="view_variables(request) = !view_variables(request)">
    <i ng-class="{'glyphicon glyphicon-chevron-right':!view_variables(request), 'glyphicon glyphicon-chevron-left': view_variables(request)}"></i>
</div>

Controller code:

$scope.view_variables = function(req){
    if (!req.enabled_variables && !req.disabled_variables) {
        $http.get('/api/files/' + $scope.file_id + '/requests/' + req.id + '/variables')
        .success(function(data){
            variables = data.data;
            req.enabled_variables = [];
            req.disabled_variables = [];
            for (i=0; i<variables.length; i++) {
                if (variables[i].disabled == true) {
                    req.disabled_variables.push(variables[i]);
                } else {
                    req.enabled_variables.push(variables[i])
                }
            }
        });
    }

    req.show_variables = !req.show_variables;
}

can u just show the controller's code

Shushanth Pallegar
– Shushanth Pallegar

2016-03-22 12:23:37 +00:00
Commented Mar 22, 2016 at 12:23 — Shushanth Pallegar
– Shushanth Pallegar, Commented Mar 22, 2016 at 12:23

Jack A. · Accepted Answer · 2016-03-22 12:29:13Z

3

The view_variables function doesn't return anything, so it will always be treated as false.

You want something like this:

<div class="title" ng-click="view_variables(request)">
    <i ng-class="{'glyphicon glyphicon-chevron-right':!request.show_variables, 'glyphicon glyphicon-chevron-left': request.show_variables}"></i>
</div>

answered Mar 22, 2016 at 12:29

Jack A.

4,5531 gold badge28 silver badges38 bronze badges

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

1 Comment

Valip Over a year ago

Thank you! This was easier than expected :)

Michael Beeson · Accepted Answer · 2016-03-22 12:27:07Z

0

I think the problem is what you have going on in the ng-click attribute. By using "view_variables(request) = !view_variables(request)" are you not calling the view_variables function twice? Also, it seems strange to be assigning a value to a function call.

I would just keep ng-click="view_variables(request)" as you had in the first line of code, then have the view_variables function set a boolean somewhere in scope ($scope.data.view_vars) and have that determine ng-class for your i element.

Good luck!

--EDIT: Now that you've put up your controller, req.show_variables looks like a useful candidate

answered Mar 22, 2016 at 12:27

Michael Beeson

2,8632 gold badges20 silver badges26 bronze badges

Comments

Ankit Pundhir · Accepted Answer · 2016-03-22 12:38:31Z

0

Calling a function inside ng-class is a bad idea. Why don't you use a flag for it.

eg. inside controller-

$scope.view_variables = function(request){
  //your code

  $scope.isExpanded = !$scope.isExpanded;
};

and in html

<div class="title" ng-click="view_variables(request)">
    <i class="glyphicon" ng-class="{'glyphicon-chevron-right':!isExpanded, 'glyphicon-chevron-left':isExpanded}"></i>
</div>

answered Mar 22, 2016 at 12:38

Ankit Pundhir

1,0978 silver badges13 bronze badges

Comments

DIEGO CARRASCAL · Accepted Answer · 2016-03-22 12:49:25Z

0

May be Better this way using ng-show directive:

<div class="title" ng-click="view_variables(request)">
     <i class="glyphicon glyphicon-chevron-right" ng-show="!view_variables(request)"></i>
     <i class="glyphicon glyphicon-chevron-left" ng-show="view_variables(request)"></i>
</div>

You could use ng-if directive like so:

<div class="title" ng-click="view_variables(request)">
     <i class="glyphicon glyphicon-chevron-right" ng-if="!view_variables(request)"></i>
     <i class="glyphicon glyphicon-chevron-left" ng-if="view_variables(request)"></i>
</div>

assuming view_variables(request) returns true or false... maybe could replace it for req.show_variables.

edited Mar 22, 2016 at 12:49

answered Mar 22, 2016 at 12:30

DIEGO CARRASCAL

2,12916 silver badges16 bronze badges

4 Comments

Jack A. Over a year ago

The view_variables function actually does work (toggles request.show_variables and conditionally executes an $http request), so you don't want to call that in an ng-if. The condition for the ng-if will get evaluated for every digest loop, so the results will be non-deterministic.

DIEGO CARRASCAL Over a year ago

@Jack A. it's true... then ng-show should be more appropriate?

Jack A. Over a year ago

Anything you bind to something that gets evaluated during every digest cycle (like ng-if or ng-show) needs to have a consistent value. For performance, it's better to bind to a variable rather than a function. Function calls are best left for event handlers like ng-click, since they only get called when the event is triggered, not every digest cycle.

DIEGO CARRASCAL Over a year ago

I understand now, that's why I suggest to use req.show_variables, but I don't know his logic... Yes you are right it will make more sense.

Collectives™ on Stack Overflow

Angularjs: how change icon when item is clicked

4 Answers 4

1 Comment

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related