Question

我们需要根据数据切换属性和用户点击更改CSS类。我们已经可以根据用户点击事件更改课程。

如何根据用户点击和基于数据切换属性更改课程？

HTML：

<a ng-click="iconChange('FF'+$index)" 
   href="#" data-toggle="collapse">
   <span  title="{{idx}}" 
          ng-class="{'glyphicon1 down': FF{{$index}}, 'glyphicon1 right': !FF{{$index}} }" && 
          ng-attr-data-toggle="{{ collapse ? true : false }}">
     </span>
 </a>

JS：

$scope.iconChange = function(idx){
                            $scope[idx] = !$scope[idx];
                        };

Answer 1

使用ui-boostrap collapse指令切换项目是否已折叠。

我相信您的模板中的ng-class属性可以得到改进。尝试以下内容。

<a ng-click="iconChange($index)" 
   href="#">
   <span  title="{{idx}}" class="glyphicon1"
          ng-class="{down: showDown[$index], right: !showDown[$index] }"
     </span>
 </a>
 <div uib-collapse="showDown[$index]">...</div>

然后你的控制器应该包括

// Initialize object
$scope.showDown = {};

$scope.iconChange = function(idx){
    $scope.showDown[idx] = !$scope.showDown[idx];
}

这可能是要设置的任一属性而不是插值变量名。

如何应用基于ng-class的属性并单击Angular？

1 个答案: