कोणीय जेएस टॉगल बटन

मैं कोणीय में एक टॉगल बटन बनाने की कोशिश कर रहा हूं। मेरे पास अब तक क्या है:कोणीय जेएस टॉगल बटन

<div class="btn-group"> 
    <a class="btn btn-primary pull-right" ng-click="toggleArchive(true)" ng-show="!patient.archived">Archive patient</a> 
    <a class="btn btn-danger pull-right" ng-click="toggleArchive(false)" ng-show="patient.archived">Unarchive patient</a> 
    .... some other buttons .... 
</div>

असल में मैं दो बटन करके और उनके बीच टॉगल करके टॉगलिंग प्राप्त करता हूं। यह समस्याएं पैदा कर रहा है क्योंकि ng-hide बस छिपा हुआ होने पर बटन पर display:none शैली जोड़ता है, जो मुझे स्टाइल मुद्दों का कारण बन रहा है। आदर्श रूप से मैं एक बटन रखना चाहता हूं, जिसमें patient.archived की स्थिति के आधार पर यह टेक्स्ट, क्लास और फ़ंक्शन कॉल बदल गया है।

इसे प्राप्त करने का एक साफ तरीका क्या है?

स्रोत

2013-04-27 Dominic Bou-Samra

का उपयोग हो सकता है कि इस मदद करता है: http://stackoverflow.com/a/ 12008581/983992 –

http://www.angulartutorial.net/2017/03/how-to-build-toggle-button-or.html – Prashobh

कक्षाओं के बीच टॉगल करने और नियमित Angular expression के साथ पाठ को बांधने के लिए आपको ng-class का उपयोग करना चाहिए। इसके अलावा, अगर अपने कार्य toggleArchive केवल मूल्य टॉगल, आप इसे हटा दें और एक कोणीय अभिव्यक्ति से मूल्य को चालू कर सकते हैं:

<a class="btn pull-right" 
    ng-class="{true: 'btn-primary', false: 'btn-danger'}[!patient.archived]" 
    ng-click="patient.archived = !patient.archived"> 
    {{!patient.archived && 'Archive' || 'Unarchive'}} patient 
</a>

स्रोत

2013-04-27 12:31:27

मैंने इसे माना, और मुझे एहसास हुआ कि यह किया जा सकता है, लेकिन ऐसा लगता है कि उनके इस दृष्टिकोण के भीतर बहुत कुछ चल रहा है जिसे निर्देश पर धकेल दिया जा सकता है। विचार? –

निर्देश पुन: प्रयोज्य विजेट को समाहित करने का एक अच्छा तरीका है। तो यदि यह एक आम विजेट है, या यदि आपको लगता है कि यह किसी भी तरह प्रदर्शन को मारने जा रहा है, तो शायद यह एक निर्देश के लायक होगा। यहां एक नज़र डालें, जहां मैं अपने विचारों को साझा करता हूं [निर्देश लिखने के लिए] (http://stackoverflow.com/questions/15898991/when-to-write-a-directive/16121344#16121344)। –

आपका तर्क पीछे की तरफ है।यह वास्तव में कक्षा है: हालत, हालत नहीं: कक्षा –

यह आपकी मदद कर सकता है।

<html> 
<head> 
    <script src="js/angular.js"></script> 
    <script src="js/app.js"></script> 
    <link rel="stylesheet" href="css/bootstrap.css"> 
</head> 
<body ng-app> 
    <div ng-controller="MyCtrl"> 
      <button ng-click="toggle()">Toggle</button> 
      <p ng-show="visible">Hello World!</p> 
    </div> 
</body> 
</html> 

    function MyCtrl($scope) { 
     $scope.visible = true; 
     $scope.toggle = function() { 
      $scope.visible = !$scope.visible; 
     }; 
    }

स्रोत

2014-09-15 04:23:01

किसी अन्य थके हुए यात्री के लिए

...

आप बस ng-if इस्तेमाल किया जा सकता था। ng-if गलत होने पर डीओएम से तत्व को पूरी तरह से बाहर कर देता है, इसलिए प्रदर्शित होने पर शैलियों के साथ आपको कोई समस्या नहीं होगी।

<button class="btn btn-primary pull-right" ng-click="toggleArchive(true)" ng-if="!patient.archived">Archive patient</button> 
<button class="btn btn-danger pull-right" ng-click="toggleArchive(false)" ng-if="patient.archived">Unarchive patient</button>

स्रोत

2015-04-08 05:20:54 wired00

इस हेल्प

<!-- Include Bootstrap--> 
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script> 

<!-- Code --> 
<a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed">Click here to <strong>Toggle (show/hide)</strong> description</a>

स्रोत

2015-08-17 12:02:02

यह सबसे सरल जवाब है: इसके अलावा वहाँ वास्तव में आप सिर्फ इस तरह

कुछ बटन के पाठ को बदल सकता है बटन समूह के लिए एक की जरूरत नहीं है मुझे मिल गया है। मैंने एनिमेशन के साथ यह कोशिश नहीं की है क्योंकि मैं इसे त्वरित सेटअप के लिए उपयोग करता हूं।

<a ng-click="scopeVar=scopeVar!=true">toggle</a> 

<div ng-show="scopeVar">show stuff</div>

साथ scopeVar = scopeVar

! = सच अपरिभाषित सच हो जाता है।

स्रोत

2016-02-27 14:16:37

<input type="checkbox" class="toggle-button" 
     ng-model="patient.archived">

फिर बटन की तरह चेकबॉक्स को स्टाइल करें।

टॉगल और कार्य करने की जरूरत है, अपने मरीज वर्ग के लिए निम्नलिखित जोड़ें:

class Patient { 
    constructor() { 
     this.archived = false; 
    } 
    ... 
    get angularArchived() { 
     return this.archived; 
    } 
    set angularArchived(value) { 
     if (value !== this.archived) 
      toggleArchived(value); 
     } 
     this.archived = value; 
    } 
}

तो

<input type="checkbox" class="toggle-button" 
     ng-model="patient.angularArchived">

स्रोत

2016-07-11 11:16:26

कोणीय जेएस टॉगल बटन

उत्तर

संबंधित मुद्दे