मैं एक बूलियन पर आधारित AngularJS में एनजी-शो को कैसे टॉगल कर सकता हूं?

Question

मेरे पास उन संदेशों के उत्तर के लिए एक फ़ॉर्म है जो मैं केवल तभी दिखाना चाहता हूं जब isReplyFormOpenवह सत्य हो, और हर बार मैं उस उत्तर बटन पर क्लिक करता हूं जिसे मैं दिखाना चाहता हूं कि फ़ॉर्म दिखाया गया है या नहीं। मैं यह कैसे कर सकता हूँ?

Answer 1

आपको बस एनजी-क्लिक इवेंट पर ".ReplyFormOpen" के मूल्य को टॉगल करने की आवश्यकता है

<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
 <div ng-show="isReplyFormOpen" id="replyForm">
   </div>

Comments

मैं वास्तव में इसका उपयोग कर रहा था, लेकिन किसी कारण के लिए एनजी-क्लिक में स्थानीय बूलियन को "ओवरराइडिंग" किया गया था जिसे मैंने नियंत्रक $ दायरे में घोषित किया था। समस्या गायब हो जाती है अगर मैं नियंत्रक के एक समारोह के माध्यम से टॉगल करता हूं: एनजी-क्लिक = "टॉगलबुलियन ()"। कोई विचार क्यों?

— एंटोनी

क्या आपने नियंत्रक में डिफ़ॉल्ट के साथ बूलियन मान सेट किया है? $ गुंजाइश सेट करें ।isReplyFormOpen = नियंत्रक फ़ंक्शन में फर्स्टलेंड पहली बार। और कोशिश करें।

— नीटू बंसल

ओह, मैंने नियंत्रक में बूलियन को परिभाषित किया। अजीब बात यह है कि यह डिफ़ॉल्ट मान पेज लोड पर एनजी-शो द्वारा सही ढंग से पढ़ा गया था, लेकिन फिर एनजी-क्लिक पर क्लिक करने के बाद यह केवल एनजी-शो को अपडेट करेगा, और पेज में अन्य नहीं (सभी एक ही बूलियन देख रहे हैं- कम से कम सिद्धांत में) ...

— एंटोनी

उसे हल कर लिया। क्योंकि एनजी-रिपीट में मेरे एनजी-क्लिक को नेस्टेड किया गया था, इसने एक चाइल्ड स्कोप बनाया जो मूल बूलियन को छुपाता है जब आप इसके मूल्य को बदलने का प्रयास करते हैं । Stackoverflow.com/questions/15388344/… देखें । कोणीय सर्वोत्तम प्रथाओं के अनुसार, आपको $ गुंजाइश को केवल-पढ़ने के लिए निर्देशों के रूप में व्यवहार करना चाहिए।

— एंटोनी

मैं आपकी चाल का उपयोग करता हूं ng-class: <span ng-click="started=!started" ng-class="started ? 'btn-danger' : 'btn-success' ">+1। साभार:) ♥

— ivahidmontazer

Answer 2

मूल रूप से मैं यह द्वारा हल नहीं आईएनजी isReplyFormOpenमूल्य जब भी यह क्लिक किया जाता है:

<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>

<div ng-init="isReplyFormOpen = false" ng-show="isReplyFormOpen" id="replyForm">
    <!-- Form -->
</div>

Comments

है ng-initआवश्यक?

— चार्ली श्लिसेर

@CharlieS आवश्यक नहीं है, isReplyFormOpen undefinedप्रारंभ में है और!undefined == true

— sceid

Answer 3

यदि यहाँ क्लिक के आधार पर यह है:

ng-click="orderReverse = orderReverse ? false : true"

Answer 4

यह ध्यान देने योग्य है कि यदि आपके पास नियंत्रक ए में एक बटन है और नियंत्रक बी में आप जिस तत्व को दिखाना चाहते हैं, तो आपको नियंत्रकों में गुंजाइश चर तक पहुंचने के लिए डॉट नोटेशन का उपयोग करना पड़ सकता है।

उदाहरण के लिए, यह काम नहीं करेगा :

<div ng-controller="ControllerA">
  <a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>

  <div ng-controller="ControllerB">
    <div ng-show="isReplyFormOpen" id="replyForm">
    </div>
  </div>

</div>

इसे हल करने के लिए, एक वैश्विक चर बनाएं (अर्थात नियंत्रक ए या आपके मुख्य नियंत्रक में):

.controller('ControllerA', function ($scope) {
  $scope.global = {};
}

फिर अपने क्लिक में एक 'वैश्विक' उपसर्ग जोड़ें और चर दिखाएं:

<div ng-controller="ControllerA">
  <a ng-click="global.isReplyFormOpen = !global.isReplyFormOpen">Reply</a>

  <div ng-controller="ControllerB">
    <div ng-show="global.isReplyFormOpen" id="replyForm">
    </div>
  </div>

</div>

अधिक विवरण के लिए, नेगुलर-यूआई डॉक्यूमेंट में नेस्टेड स्टेट्स एंड नेस्टेड व्यू देखें , एक वीडियो देखें , या समझ के दायरे पढ़ें ।

Comments

बूलियन्स के लिए सबसे अच्छा समाधान

— maverickosama92

Answer 5

यहाँ एक उदाहरण है ngclick & ng-if निर्देश का उपयोग करना।

नोट : वह एनजी-अगर DOM से एलिमेंट हटाता है, लेकिन एनजी-हाइड बस एलिमेंट के डिस्प्ले को छिपा देता है।

<!-- <input type="checkbox" ng-model="hideShow" ng-init="hideShow = false"></input> -->

<input type = "button" value = "Add Book"ng-click="hideShow=(hideShow ? false : true)"> </input>
     <div ng-app = "mainApp" ng-controller = "bookController" ng-if="hideShow">
             Enter book name: <input type = "text" ng-model = "book.name"><br>
             Enter book category: <input type = "text" ng-model = "book.category"><br>
             Enter book price: <input type = "text" ng-model = "book.price"><br>
             Enter book author: <input type = "text" ng-model = "book.author"><br>


             You are entering book: {{book.bookDetails()}}
     </div>

    <script>
             var mainApp = angular.module("mainApp", []);

             mainApp.controller('bookController', function($scope) {
                $scope.book = {
                   name: "",
                   category: "",
                   price:"",
                   author: "",


                   bookDetails: function() {
                      var bookObject;
                      bookObject = $scope.book;
                      return "Book name: " + bookObject.name +  '\n' + "Book category: " + bookObject.category + "  \n" + "Book price: " + bookObject.price + "  \n" + "Book Author: " + bookObject.author;
                   }

                };
             });
    </script>

Answer 6

यदि आपके पास सबमेनस के साथ कई मेनू हैं, तो आप नीचे दिए गए समाधान के साथ जा सकते हैं।

एचटीएमएल

          <ul class="sidebar-menu" id="nav-accordion">
             <li class="sub-menu">
                  <a href="" ng-click="hasSubMenu('dashboard')">
                      <i class="fa fa-book"></i>
                      <span>Dashboard</span>
                      <i class="fa fa-angle-right pull-right"></i>
                  </a>
                  <ul class="sub" ng-show="showDash">
                      <li><a ng-class="{ active: isActive('/dashboard/loan')}" href="#/dashboard/loan">Loan</a></li>
                      <li><a ng-class="{ active: isActive('/dashboard/recovery')}" href="#/dashboard/recovery">Recovery</a></li>
                  </ul>
              </li>
              <li class="sub-menu">
                  <a href="" ng-click="hasSubMenu('customerCare')">
                      <i class="fa fa-book"></i>
                      <span>Customer Care</span>
                      <i class="fa fa-angle-right pull-right"></i>
                  </a>
                  <ul class="sub" ng-show="showCC">
                      <li><a ng-class="{ active: isActive('/customerCare/eligibility')}" href="#/CC/eligibility">Eligibility</a></li>
                      <li><a ng-class="{ active: isActive('/customerCare/transaction')}" href="#/CC/transaction">Transaction</a></li>
                  </ul>
              </li>
          </ul>

दो कार्य हैं जिन्हें मैंने पहले बुलाया है एनजी-क्लिक = hasSubMenu ('डैशबोर्ड')। इस फ़ंक्शन का उपयोग मेनू को चालू करने के लिए किया जाएगा और इसे नीचे दिए गए कोड में समझाया गया है। एनजी-क्लास = "{सक्रिय: isActive ('/ customerCare / लेन-देन')} यह वर्तमान मेनू आइटम में सक्रिय एक वर्ग को जोड़ देगा।

अब मैंने अपने ऐप में कुछ कार्यों को परिभाषित किया है:

सबसे पहले, एक निर्भरता $ rootScope जोड़ें, जिसका उपयोग चर और कार्यों को घोषित करने के लिए किया जाता है। $ RoootScope के बारे में और जानने के लिए लिंक देखें: https://docs.angularjs.org/api/ngs/s/ $ rootScope

यहाँ मेरी एप्लिकेशन फ़ाइल है:

 $rootScope.isActive = function (viewLocation) { 
                return viewLocation === $location.path();
        };

उपरोक्त फ़ंक्शन का उपयोग वर्तमान मेनू आइटम में सक्रिय वर्ग को जोड़ने के लिए किया जाता है।

        $rootScope.showDash = false;
        $rootScope.showCC = false;

        var location = $location.url().split('/');

        if(location[1] == 'customerCare'){
            $rootScope.showCC = true;
        }
        else if(location[1]=='dashboard'){
            $rootScope.showDash = true;
        }

        $rootScope.hasSubMenu = function(menuType){
            if(menuType=='dashboard'){
                $rootScope.showCC = false;
                $rootScope.showDash = $rootScope.showDash === false ? true: false;
            }
            else if(menuType=='customerCare'){
                $rootScope.showDash = false;
                $rootScope.showCC = $rootScope.showCC === false ? true: false;
            }
        }

डिफ़ॉल्ट रूप से $ rootScope.showDash और $ rootScope.showCC झूठे हैं। जब पृष्ठ शुरू में लोड होता है तो यह मेनू को बंद कर देगा। यदि आपके पास दो से अधिक सबमेनस तदनुसार हैं।

hasSubMenu () फ़ंक्शन मेनू के बीच टॉगल करने के लिए काम करेगा। मैंने एक छोटी सी शर्त जोड़ी है

if(location[1] == 'customerCare'){
                $rootScope.showCC = true;
            }
            else if(location[1]=='dashboard'){
                $rootScope.showDash = true;
            }

यह चयनित मेनू आइटम के अनुसार पृष्ठ को फिर से लोड करने के बाद सबमेनू खुला रहेगा।

मैंने अपने पृष्ठों को इस तरह परिभाषित किया है:

$routeProvider
        .when('/dasboard/loan', {
            controller: 'LoanController',
            templateUrl: './views/loan/view.html',
            controllerAs: 'vm'
        })

यदि आप सबमेनू के बिना एक ही मेनू है, तो आप आइएक्टिव () फ़ंक्शन का उपयोग कर सकते हैं। आप अपनी आवश्यकता के अनुसार कोड को संशोधित कर सकते हैं। आशा है कि यह मदद करेगा। आपका दिन अच्छा रहे :)