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-class 为你的 i 元素。

祝你好运！

--编辑：现在你已经安装了你的控制器，req.show_variables 看起来是一个有用的候选者

Answer 3

在 ng-class 中调用函数是个坏主意。你为什么不为它使用一个标志。

例如。 内部控制器-

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

Answer 4

使用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) 返回真或假...也许可以将其替换为req.show_variables。