एंगुलरजेएस टॉगल बटन

Question

के माध्यम से दृश्यता divs टॉगल करता है मेरे पास प्रत्येक div के लिए दो divs और एक बटन का एक से अधिक सेट हैं। दो divs में वैकल्पिक सामग्री होती है जिसे बटन स्विचिंग दृश्यता को संभालना चाहिए। मुझे एक कोणीय समाधान के बारे में सोचना प्रतीत नहीं होता है जो पृष्ठ में कई अलग-अलग उदाहरणों के लिए एक्स्टेंसिबल हो सकता है (मेरा दिमाग JQuery में इसे प्राप्त करना चाहता है)।

I have created a JSFiddle example here.

आप <span class="trigger">A</span> के साथ दो divs p_table वर्ग देखेंगे। ट्रिगर को अपने मूल div p_container के अंदर दो p_table को वैकल्पिक करना चाहिए।

Answer 1

एनजी-क्लास के साथ आप यह कैसे कर रहे हैं, यह कुंजी एनजी-शो/एनजी-छुपा के साथ भी कर सकती है। दोनों कार्यान्वयनों के लिए कोई जावास्क्रिप्ट की आवश्यकता नहीं है, केवल एक नियंत्रक गुंजाइश।

एनजी-क्लास: एक चर के आधार पर एक वर्ग चुनें, जो ट्रिगर क्लिक पर टॉगल करता है।

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

एनजी-शो/एनजी -इड: चर पर दिखाएं या छुपाएं। यह करने का यह सामान्य तरीका है।

<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

यहाँ कैसे मैंने किया, ngHide और एक छोटे से टॉगल समारोह का उपयोग कर रहा है। कार्य डेमो Here। मुझे आशा है कि इस मदद करता है

मेरे एचटीएमएल मार्कअप

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

मेरे AngularJS नियंत्रक

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