AngularJS: एनजी-शो / एनजी-छिपाने `{{}}` प्रक्षेप के साथ काम नहीं कर रहा है

Question

मैं AngularJS द्वारा उपलब्ध कराए गए ng-showऔर ng-hideकार्यों का उपयोग करके कुछ HTML को दिखाने / छिपाने की कोशिश कर रहा हूं ।

प्रलेखन के अनुसार, इन कार्यों के लिए संबंधित उपयोग निम्नानुसार हैं:

ngHide - {व्यंजक} - यदि अभिव्यक्ति सत्य है तो तत्व को क्रमशः दिखाया या छिपाया जाता है। ngShow - {अभिव्यक्ति} - यदि अभिव्यक्ति सत्य है तो तत्व को क्रमशः दिखाया या छिपाया गया है।

यह निम्नलिखित usecase के लिए काम करता है:

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

हालाँकि, क्या हमें किसी ऑब्जेक्ट से अभिव्यक्ति के रूप में एक पैरामीटर का उपयोग करना चाहिए ng-hideऔर ng-showउसे सही true/ falseमूल्य दिया जाता है, लेकिन मूल्यों को एक बूलियन के रूप में नहीं माना जाता है, इसलिए हमेशा वापस लौटें false:

स्रोत

<p ng-hide="{{foo.bar}}">I could be shown, or I could be hidden</p>
<p ng-show="{{foo.bar}}">I could be shown, or I could be hidden</p>

परिणाम

<p ng-hide="true">I should be hidden but I'm actually shown</p>
<p ng-show="true">I should be shown but I'm actually hidden</p>

यह या तो एक बग है या मैं इसे सही ढंग से नहीं कर रहा हूं।

मुझे ऑब्जेक्ट मापदंडों को संदर्भित करने पर कोई भी सापेक्ष जानकारी नहीं मिल सकती है, इसलिए मैं उम्मीद कर रहा था कि कोई भी व्यक्ति AngularJS की बेहतर समझ के साथ मेरी मदद कर सकता है?

Answer 1

foo.barसंदर्भ ब्रेसिज़ शामिल नहीं होना चाहिए:

<p ng-hide="foo.bar">I could be shown, or I could be hidden</p>
<p ng-show="foo.bar">I could be shown, or I could be hidden</p>

कोणीय अभिव्यक्तियों को घुंघराले ब्रेस बाइंडिंग के भीतर होना चाहिए, जहां के रूप में कोणीय निर्देश नहीं हैं।

एंगुलर टेम्प्लेट को समझना भी देखें ।

Comments

"कोणीय अभिव्यक्तियों को घुंघराले ब्रेस बाइंडिंग के भीतर होना चाहिए, जहां के रूप में कोणीय निर्देश नहीं हैं।" वह लाइन वहीं पर है। काश मैं इसे दो बार बढ़ा सकता।

— मुशीनोझिन

यदि आप यह जाँचना चाहते हैं कि क्या दायर का मान उपयोग है:<p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>

— czerasz

धन्यवाद, यह बहुत सहज नहीं था (जैसा कि आप सभी अप-वोटों से बता सकते हैं)

— वाक्य ०१४ ’

एनजी-छिपाने के लिए प्रलेखन ( docs.angularjs.org/api/ng/directive/ngHide ) विशेष रूप से तर्क को एक अभिव्यक्ति कहता है, जिसका अर्थ है कि इसके लिए घुंघराले ब्रेस की आवश्यकता होती है। मुझे यहां क्या समझ नहीं आ रहा है?

— एड नॉरिस

यह उत्तर वास्तव में सही नहीं है। घुंघराले ब्रेसिज़ संकेत करते हैं कि अभिव्यक्ति को निष्पादित किया जाना चाहिए और इसका परिणाम डोम में डाला जाना चाहिए, जबकि निर्देश अपने तर्क के आधार पर अभिव्यक्ति के रूप में विशेषता मूल्य का इलाज कर सकता है या नहीं कर सकता है। कुछ निर्देश (ngHref) घुंघराले ब्रेस बाइंडिंग का भी समर्थन करते हैं।

— वासाका

Answer 2

{{}}बाध्यकारी के लिए कोणीय निर्देशों का उपयोग करते समय आप उपयोग नहीं कर सकते, ng-modelलेकिन गैर-कोणीय विशेषताओं को बांधने के लिए जिसका आपको उपयोग करना होगा {{}}।

उदाहरण के लिए:

ng-show="my-model"
title = "{{my-model}}"

Answer 3

इसके साथ रैपिंग एक्सप्रेशन आज़माएँ:

$scope.$apply(function() {
   $scope.foo.bar=true;
})

Comments

foo.bar = trueहोना चाहिए scope.foo.bar = true, के मान बदलने के लिएfoo.bar

— राजकमल सुब्रमण्यम

मुझे एक अजीब समस्या थी जहां कभी-कभी इसे दिखाया जाता था और कभी-कभी ऐसा नहीं होता, मेरे दायरे के अपडेट को $ गुंजाइश में लपेटता है। $ लागू (फ़ंक्शन () {}); मेरे लिए काम किया :)

— कभी नहीं

मैं कोणीय के लिए नया हूं और मैं वास्तव में हर बार ऐसा नहीं करता जब मुझे चर सेट करने की आवश्यकता होती है। क्या कोई समझा सकता है कि कभी-कभी इसकी आवश्यकता क्यों होती है?

— डेविस

एक मददगार ब्लॉग पोस्ट ने मुझे इसका जवाब देने में मदद की। किसी भी अजाक्स या कस्टम श्रोताओं को अपडेट करने में समस्या होगी और $scope.$apply

— डेविस

Answer 4

चूंकि ng-showमुझे लगता है कि एक कोणीय विशेषता है, हमें मूल्यांकन फूल कोष्ठक ( {{}}) लगाने की आवश्यकता नहीं है ।

विशेषताओं के लिए जैसे classहमें मूल्यांकन फूल ब्रैकेट ( {{}}) के साथ चरों को घेरना चाहिए ।

Comments

करीब - मैंने इस पर ध्यान दिया और ऐसा लगता है कि कोणीय अभिव्यक्तियों को घुंघराले कोष्ठक के भीतर होना चाहिए जहाँ कोणीय निर्देश नहीं हैं

— My Head Hurts

Answer 5

<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script type="text/javascript">
    function controller($scope) {
        $scope.data = {
            show: true,
            hide: false
        };
    }
</script>

<div ng-controller="controller">
    <div ng-show="data.show"> If true the show otherwise hide. </div>
    <div ng-hide="!(data.hide)"> If true the show otherwise hide.</div>
</div>

Answer 6

foo.bar के आसपास {{}} ब्रेसिज़ निकालें क्योंकि कोणीय अभिव्यक्तियों को कोणीय निर्देशों में उपयोग नहीं किया जा सकता है।

अधिक के लिए: https://docs.angularjs.org/api/ng/directive/ngShow

उदाहरण

  <body ng-app="changeExample">
    <div ng-controller="ExampleController">
    <p ng-show="foo.bar">I could be shown, or I could be hidden</p>
    <p ng-hide="foo.bar">I could be shown, or I could be hidden</p>
    </div>
    </body>

<script>
     angular.module('changeExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.foo ={};
          $scope.foo.bar = true;
        }]);
</script>

Answer 7

यदि आप किसी {{अभिव्यक्ति}} की स्थिति के आधार पर किसी तत्व को दिखाना / छिपाना चाहते हैं, तो आप इसका उपयोग कर सकते हैं ng-switch:

<p ng-switch="foo.bar">I could be shown, or I could be hidden</p>

अनुच्छेद प्रदर्शित किया जाएगा जब foo.bar सही है, जब छिपा हुआ है।