AngularJS,

Question

düğmelerini kullanarak divların görünürlüğünü değiştirir Birden çok iki div kümesi ve her sayfa için bir düğme kullanıyorum. İki div, düğmenin anahtarlama görünürlüğünü ele alması için alternatif içerik içerir. Sayfada birden çok ayrı örneğe genişletilebilen Açısal bir çözüm düşünemiyorum (aklım JQuery'de yapılmasını istiyor).

I have created a JSFiddle example here.

Sen <span class="trigger">A</span> iki div'ler p_table sınıfı göreceksiniz. Tetikleyici, iki p_table'ını kendi ebeveyni p_container içinde değiştirmelidir.

Answer 1

Bunu yaptığınız şeyin anahtarı ng-class'tır, ayrıca ng-show/ng-hide ile de yapabilirsiniz. Her iki uygulama da javascript gerektirmez, sadece denetleyici kapsamı.

NG-CLASS: Tetik tıklatmada geçiş yapan bir değişkeni temel alan bir sınıf seçin.

<div class="p_container"> 
    <p class="p_table" ng-class="{hidden:!show,chaldean:show}">This is actual content</p> 
    <p class="p_table" ng-class="{hidden:show,chaldean:!show}">This is transliterated content</p> 
    <span class="trigger" ng-click="show=!show">A</span> 
</div> 

NG-SHOW/NG-HIDE: Değişkeni göster veya gizle. Bunu yapmanın tipik yolu budur. İşte

<div class="p_container"> 
    <p class="p_table" ng-show="show">This is actual content</p> 
    <p class="p_table" ng-hide="!show">This is transliterated content</p> 
    <span class="trigger" ng-click="show=!show">A</span> 
</div> 

Answer 2

Ben ngHide ve küçük geçiş fonksiyonu kullanılarak, nasıl yaptığını olduğunu. Çalışma demo Here. Ben bunun için bir jsfiddle ekleyebilirsiniz sormak ama takdir için bu

Benim HTML işaretleme

<div ng-app="myApp" ng-controller="myCtrl"> 
      <div id="filter-row"> 
       <span 
        id="toggle-filter" 
        ng-click="toggleFilter()"> 
        <i class="glyphicon glyphicon-heart"></i> 
       </span> 

       <div class="hiddenDiv" ng-hide="toggle"> 
        <p>I am the hidden Div!</p> 
       </div> 
      </div> 
</div> 

Benim angularjs Denetleyicisi Maalesef

var myApp = angular.module("myApp", []); 
myApp.controller ("myCtrl", ['$scope', function($scope){ 
    $scope.toggle = true; 
    $scope.toggleFilter = function() { 
     $scope.toggle = $scope.toggle === false ? true : false; 
    } 
}]);