AngularJS - إخفاء العناصر وإظهارها دون استخدام JS/Script

Question

لدي مجموعة من العناوين (<h3>) والتي عند النقر عليها، تقوم بإخفاء/إظهار الأقسام المقابلة لها.

لقد حققت هذا باستخدام ng-show/ng-hide ومن ثم الاتصال ب $scope المتغير غير نشط/نشط.

ما أود معرفته هو ما إذا كان من الممكن تحقيق نفس النتيجة، دون الحاجة إلى استخدام JS في الداخل $scope.isInactive و $scope.isActive والمنطق يمكن وضعها في ترميز HTML؟ربما معنا ng-class?

لغة البرمجة:

<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;
    }
};

}

بلدي jsFiddle: http://jsfiddle.net/oampz/Wr79J/2/

Answer 1

نعم، لقد حددت بشكل صحيح أن هذا هو المكان المناسب للاستخدام ng-class.

من الممكن القيام بذلك فقط باستخدام HTML ووحدة التحكم البسيطة: http://jsfiddle.net/Wr79J/4/

شبيبة

function EventController($scope) {
    $scope._activeTab = 1;
}

لغة البرمجة

<div ng-app="">
    <div ng-controller="EventController">
        <div class="tabs">
             <h3 ng-class="{ 'inactive': _activeTab !== 1, 'active': _activeTab == 1 }">
               <a id="1" ng-click="_activeTab=1">1 - 5 Years</a></h3>

     <!-- .... -->

    <div class="clear" ng-show="_activeTab == 1">
       1 - 5 Years Text - Lorem ipsum ...
    </div>

</div>

ملحوظة: أعتقد أنك كنت تستخدم {{$index}} من النطاق الذي ورثه هذا الجزء من القالب.لقد تركت ذلك دون تغيير في المثال.

على الرغم من أن هذا يعمل، إلا أن هذا الرمز لا يمكن صيانته بشكل كبير.قد ترغب في استخدام أسماء أكثر وصفية لعلامات التبويب بدلاً من ذلك 1, 2, 3, ، و 4.

يمكنك التخلص من وحدة التحكم تمامًا باستخدام ng-init="_activeTabe = 1" على div الحاوية، ولكن هذا ليس الاستخدام الصحيح لـ ng-init.

---

كما أنه لا يعتبر من الممارسات الجيدة التعامل مع DOM على أي حال من وحدة التحكم (أنا أنظر إلى addClass/removeClass في الكود).إذا كان ذلك ضروريا، ينبغي للمرء أن يستخدم التوجيهات (على سبيل المثال ng-class) للتلاعب.

Answer 2

يمكنك فقط تعيين متغير لتعيين علامة التبويب النشطة.

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

Answer 3

هنا مثال - http://plnkr.co/edit/NTVPbOC5k7HKo88qp6vN?p=preview مع عدم وجود كود جافا سكريبت للمنطق أعلاه.

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