Question

HTML

<li ng-class="{class : classVar==='Marketing' }" ng-click="changeClass('Marketing')">                           
    <i class="fa fa-pencil" style="visibility:hidden;"></i>
    Marketing
    <i class="fa fa-times" title="Close"  style="visibility:hidden;"></i>
</li>
<li ng-class="{class : classVar==='Sells' }" ng-click="changeClass('Sells')">
    <i class="fa fa-pencil" style="visibility:hidden;"></i>
    Sells Team Nestle
    <i class="fa fa-times" title="Close"  style="visibility:hidden;"></i>
</li>

Angularjs

$scope.changeClass = function(value){
       $scope.classVar= value; 
};

我想在点击<i>项时显示隐藏的li标记。如何在angularjs中执行此操作。

Answer 1

您可以将ng-show用于您的purpouse

<li ng-class="{class : classVar==='Marketing' }" ng-click="changeClass('Marketing')">                           
    <i class="fa fa-pencil" ng-show="classVar === 'Marketing'"></i>
    Marketing
    <i class="fa fa-times" title="Close"  ng-show="classVar === 'Marketing'"></i>
</li>
<li ng-class="{class : classVar==='Sells' }" ng-click="changeClass('Sells')">
    <i class="fa fa-pencil" ng-show="classVar === 'Sells'"></i>
    Sells Team Nestle
    <i class="fa fa-times" title="Close"  ng-show="classVar === 'Marketing'"></i>
</li>

Answer 2

在控制器中设置变量

$scope.toShow = false;

点击元素后，将toShow值更改为true函数内的changeClass。

在HTML中，试试这个

<i class="fa fa-times" title="Close" ng-show="toShow"></i>

Answer 3

向ng-if添加<i>条件：

<i class="fa fa-pencil" ng-if="show" style="visibility:hidden;"></i>

在ng-click执行此操作：

ng-click="show = !show"

它将切换show的值，您甚至不需要控制器中的函数。

如何在单击项目时显示隐藏的<i>标记

3 个答案: