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属性中。通过使用＆＃34; view_variables（request）=！view_variables（request）＆＃34;你没有两次调用view_variables函数吗？另外，为函数调用赋值似乎很奇怪。

我会保持ng-click =＆＃34; view_variables（request）＆＃34;就像你在第一行代码中所做的那样，让view_variables函数在范围内设置一个布尔值（$ scope.data.view_vars）并确定你的i元素的ng-class。

祝你好运！

- 编辑：既然您已经安装了控制器，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)返回true或false ...也许可以替换req.show_variables。

Answer 4

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

Angularjs：点击项目时如何更改图标

4 个答案: