Angularjs: как изменить значок при нажатии элемента

Question

Я знаю, что у этого вопроса уже есть некоторые ответы/решения, но ни один из них не работает для меня, скорее всего, потому что это первый случай, когда я пытаюсь реализовать что-то с помощью Angularjs.

У меня есть div (название), который расширяет некоторую информацию, когда он нажал, и я хочу, чтобы изменить значок внутри него, когда эта информация видна ...

Это мой код:

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

И это то, что я пытался сделать, но не работает, потому что DIV не будет показывать расширенную информацию больше:

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

код контроллера:

$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; 
} 

Answer 1

view_variables функция ничего не возвращает, поэтому он всегда будет рассматриваться как false.

Вы хотите что-то вроде этого:

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

Answer 2

Я думаю, проблема в том, что вы делаете в атрибуте ng-click. Используя «view_variables (request) =! View_variables (request)», вы не вызываете функцию view_variables дважды? Кроме того, кажется странным назначать значение вызову функции.

Я бы просто сохранил ng-click = "view_variables (request)", как у вас в первой строке кода, а затем функция view_variables задает логическое значение где-то в области видимости ($ scope.data.view_vars) и имеет это определите ng-класс для вашего элемента i.

Удачи вам!

--edit: Теперь, когда вы разместили свой контроллер, req.show_variables выглядит как полезный кандидат

Answer 3

может быть лучше, таким образом, используя 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> 

Вы можете использовать ng-if directive так:

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

предполагая view_variables(request) возвращает истинное или false ... возможно, может заменить его на req.show_variables.

Answer 4

Вызов функции внутри ng-класса - плохая идея. Почему бы вам не использовать для этого флаг.

например. внутри контроллер-

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

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

и в HTML

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