AngularJS-不使用JS/Script隐藏和显示元素

我有一组标题（

），单击这些标题时，它们会隐藏/显示相应的部分

我通过使用

ngshow/nghide

然后调用

$scope

变量isnactive/isActive来实现这一点

我想知道的是，如果不需要在

$scope.isInactive

和

$scope.isActive

中使用JS，是否可以实现相同的结果，并且将逻辑放置在HTML标记中？可能与美国的

ng类

HTML:

<div ng-app="">
  <div ng-controller="EventController">
    <div class="tabs">
         <h3 class="" id="tab-{{$index}}-0"><a id="1" data="{{$index}}" ng-click="switch($event)">1 - 5 Years</a></h3>

         <h3 class="inactive" id="tab-{{$index}}-1"><a id="2" data="{{$index}}" ng-click="switch($event)">6 - 10 Years</a></h3>

         <h3 class="inactive" id="tab-{{$index}}-2"><a id="3" data="{{$index}}" ng-click="switch($event)">11 - 15 Years</a></h3>

         <h3 class="inactive" id="tab-{{$index}}-3"><a id="4" data="{{$index}}" ng-click="switch($event)">16 - 20 Years</a></h3>

        <div class="clear" data="{{$index}}" ng-hide="isInactive('#tab-'+{{$index}} + '-0')">1 - 5 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div class="clear" ng-show="isActive('#tab-'+{{$index}} + '-1')">6 - 10 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div class="clear" ng-show="isActive('#tab-'+{{$index}} + '-2')">11 - 15 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div class="clear" ng-show="isActive('#tab-'+{{$index}} + '-3')">16 - 20 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
    </div>
  </div>
</div>

function EventController($scope) {

$scope.
switch = function (e) {
    var target = e.target || e.srcElement;
    var elem = angular.element(target);
    var parent = elem.parent();
    var allHeadings = parent.parent().find("h3");

    angular.forEach(allHeadings, function (aHeading) {
        var child = angular.element(aHeading);
        child.addClass("inactive");
    });
    parent.removeClass("inactive");
}

$scope.isInactive = function (e) {
    var elem = angular.element(document.querySelector(e));
    if (elem.hasClass("inactive")) {
        return true;
    } else {
        return false;
    }
};

$scope.isActive = function (e) {
    var elem = angular.element(document.querySelector(e));
    if (elem.hasClass("inactive")) {
        return false;
    } else {
        return true;
    }
};

}

---

我的JSFIDLE:

是的，您已经正确地确定了这是使用

ng类的合适位置

可以仅使用HTML和极简控制器：

JS

函数EventController（$scope）{
$scope.\u activeTab=1；
}

HTML


在container div上，但它不是正确使用的
ng init


此外，从控制器以任何方式操纵DOM也不是一种好的做法（我正在查看代码中的
addClass/removeClass
）。如果有必要，则应使用指令（例如，
ng类
）进行操作。
是的，您已正确确定这是使用
ng类
的合适位置

可以仅使用HTML和极简控制器：

JS

函数EventController（$scope）{
$scope.\u activeTab=1；
}

HTML


在container div上，但它不是正确使用的
ng init


此外，从控制器以任何方式操纵DOM也不是一种好的做法（我正在查看代码中的
addClass/removeClass
）。如果有必要，则应使用指令（例如，
ng class
）进行操作。
您只需设置一个变量即可设置活动选项卡

<div class="tabs">
  <h3 ng-click="range=1">1-5</h3>
  <h3 ng-click="range=2">6-10</h3>
  <div class="clear" ng-show="range==1">1 - 5 Years Text</div>
  <div class="clear" ng-show="range==2">6 - 10 Years Text</div>
</div>


1-5
6-10
1-5年文本
6-10年案文
您只需设置一个变量即可设置活动选项卡

<div class="tabs">
  <h3 ng-click="range=1">1-5</h3>
  <h3 ng-click="range=2">6-10</h3>
  <div class="clear" ng-show="range==1">1 - 5 Years Text</div>
  <div class="clear" ng-show="range==2">6 - 10 Years Text</div>
</div>


1-5
6-10
1-5年文本
6-10年案文
下面是一个示例，上面的逻辑没有javascript代码

  <div>
    <div>
      <div class="tabs">
        <h3 ng-init="active=1" ng-click="active=1" ng-class="{true:'active', false:'inactive'}[active==1]"><a >1 - 5 Years</a></h3>
        <h3 ng-click="active=2" ng-class="{true:'active', false:'inactive'}[active==2]"><a >6 - 10 Years</a></h3>
        <h3 ng-click="active=3" ng-class="{true:'active', false:'inactive'}[active==3]"><a >11 - 15 Years</a></h3>
        <h3 ng-click="active=4" ng-class="{true:'active', false:'inactive'}[active==4]"><a >16 - 20 Years</a></h3>

        <div ng-show="active==1">1 - 5 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div ng-show="active==2">6 - 10 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div ng-show="active==3">11 - 15 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div ng-show="active==4">16 - 20 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
      </div>
    </div>
  </div>


1-5年
6-10年
11至15年
16-20年
1-5年的文本-Lorem ipsum Door sit amet，供职于社会精英，在劳动和生活中暂时占有一席之地。但是，我们必须尽可能少地进行实验


6-10年文本-Lorem ipsum Door sit amet，为精英献身，为劳工和社会提供临时服务。但是，我们必须尽可能少地进行实验


11-15年文本-Lorem ipsum Door sit amet，为精英献身，为劳工和社会提供临时服务。但是，我们必须尽可能少地进行实验


16-20年的文本-Lorem ipsum Door sit amet，供职于社会精英，在劳动和生活中暂时占有一席之地。但是，我们必须尽可能少地进行实验
下面是一个示例，上面的逻辑没有javascript代码

  <div>
    <div>
      <div class="tabs">
        <h3 ng-init="active=1" ng-click="active=1" ng-class="{true:'active', false:'inactive'}[active==1]"><a >1 - 5 Years</a></h3>
        <h3 ng-click="active=2" ng-class="{true:'active', false:'inactive'}[active==2]"><a >6 - 10 Years</a></h3>
        <h3 ng-click="active=3" ng-class="{true:'active', false:'inactive'}[active==3]"><a >11 - 15 Years</a></h3>
        <h3 ng-click="active=4" ng-class="{true:'active', false:'inactive'}[active==4]"><a >16 - 20 Years</a></h3>

        <div ng-show="active==1">1 - 5 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div ng-show="active==2">6 - 10 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div ng-show="active==3">11 - 15 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
        <br>
        <div ng-show="active==4">16 - 20 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
      </div>
    </div>
  </div>


1-5年
6-10年
11至15年
16-20年
1-5年的文本-Lorem ipsum Door sit amet，供职于社会精英，在劳动和生活中暂时占有一席之地。但是，我们必须尽可能少地进行实验


6-10年文本-Lorem ipsum Door sit amet，为精英献身，为劳工和社会提供临时服务。但是，我们必须尽可能少地进行实验


11-15年文本-Lorem ipsum Door sit amet，为精英献身，为劳工和社会提供临时服务。但是，我们必须尽可能少地进行实验


16-20年的文本-Lorem ipsum Door sit amet，供职于社会精英，在劳动和生活中暂时占有一席之地。但是，我们必须尽可能少地进行实验
感谢您提供了详细的解决方案，您认为古鲁的解决方案完全没有JS吗？@OamPsy他使用的是文档中不允许的
ng init
技巧。我在便条后的回答中提到了这一点。谢谢你的概述this@OamPsy
ng class=“{'tabs inactive'：\u activeTab！==1，…}”
。在这里，我使用的是这样一种方法，其中传递的对象的键是类名，如果值为truthy，则应用于元素。可以在类名周围添加引号。出于懒惰，我没有在类名
active
和
inactive
周围添加引号。更新了答案。@OamPsy我使用了单引号来防止对属性值使用的双引号的干扰。感谢详细的解决方案，你认为guru的解决方案没有JS吗？@OamPsy他使用的是文档中不允许的
ng init
技巧。我在便条后的回答中提到了这一点。谢谢你的概述this@OamPsy
ng class=“{'tabs inactive'：\u activeTab！==1，…}”
。在这里，我使用的是这样一种方法，其中传递的对象的键是类名，如果值为truthy，则应用于元素。可以在类名周围添加引号。出于懒惰，我没有在类名
active
和
inactive
周围添加引号。更新了答案。@OamPsy我已经用单引号来