কৌণিক জেএস: এনজি-শো / এনজি-হাইড `{{}}` ইন্টারপোলেশন দিয়ে কাজ করছে না

Question

আমি AngularJS দ্বারা সরবরাহিত ng-showএবং ng-hideফাংশনগুলি ব্যবহার করে কিছু HTML দেখানোর / আড়াল করার চেষ্টা করছি ।

ডকুমেন্টেশন অনুসারে, এই ফাংশনগুলির জন্য সংশ্লিষ্ট ব্যবহারগুলি নিম্নরূপ:

এনজিহাইড - {প্রকাশ} - যদি অভিব্যক্তিটি সত্য হয় তবে উপাদানটি যথাক্রমে প্রদর্শিত বা গোপন করা হবে। ngShow - {প্রকাশ। - যদি অভিব্যক্তিটি সত্য হয় তবে উপাদানটি যথাক্রমে প্রদর্শিত বা লুকানো থাকে।

এটি নিম্নলিখিত ব্যবহারের জন্য কাজ করে:

<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

"কৌণিক অভিব্যক্তিগুলি কোঁকড়ানো-ব্রেস বাইন্ডিংগুলির মধ্যে থাকা দরকার, যেখানে কৌণিক নির্দেশাবলী যেমন করে না" " ঠিক এই লাইন। আমি আশা করি আমি এই দুটি বার upvote করতে পারে।

— মুশিননশিন

যদি আপনি যাচাই করতে চান তবে দায়েরকৃত মানটির ব্যবহার রয়েছে কিনা:<p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>

— czerasz

ধন্যবাদ, এটি খুব স্বজ্ঞাত ছিল না (যেমন আপনি সমস্ত আপ-আপ থেকে বলতে পারেন)

— সেন্টেন্ট

এনজি- হাইডের জন্য ডকুমেন্টেশন ( ডকস.আঙ্গুলারজস.আর.ই.পি.আই / / ডাইরেক্টিভ / জিএনহাইড ) বিশেষভাবে যুক্তিটিকে একটি অভিব্যক্তি বলে অভিহিত করে যার অর্থ এটি কোঁকড়া ধনুর্বন্ধনী প্রয়োজন। আমি এখানে কি মিস করছি?

— এড নরিস

এই উত্তরটি আসলে সঠিক নয়। কোঁকড়া ধনুর্বন্ধনীগুলি নির্দেশ করে যে অভিব্যক্তিটি কার্যকর করা উচিত এবং এর ফলাফলটি ডিওএমের মধ্যে প্রবেশ করা উচিত, যখন নির্দেশিকা তার যুক্তির উপর নির্ভর করে বৈশিষ্ট্য মানকে একটি অভিব্যক্তি হিসাবে বিবেচনা করতে পারে বা নাও করতে পারে। কিছু নির্দেশিকা (এনজিএফরেফ) এমনকি কোঁকড়া ধনুর্বন্ধনী বাঁধাই সমর্থন করে।

— ভাসাকা

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 = truefoo.bar

— রাজকামাল সুব্রমনিয়ান

আমার একটি অদ্ভুত সমস্যা ছিল যেখানে কখনও কখনও এটি প্রদর্শিত হবে এবং কখনও কখনও এটি হবে না, আমার স্কোপ আপডেটগুলি $ স্কোপ $ in এ মোড়ানো (ফাংশন () {}); আমার জন্য কাজ করেছেন :)

— শে

আমি কৌণিকভাবে নতুন এবং আমি যখনই পরিবর্তনশীল সেট করার দরকার হয় তখন সত্যিই আমি এটি না করতাম। কেউ কখনও ব্যাখ্যা করতে পারেন যে কেন কখনও কখনও এটির প্রয়োজন হয়?

— ডেভিস

একটি সহায়ক ব্লগ পোস্ট আমাকে এর উত্তর দিতে সহায়তা করেছে। যে কোনো আয়াক্স বা কাস্টম শ্রোতাকে সক্রিয় আপডেট বিষয় আছে এবং প্রয়োজন হবে$scope.$apply

— ডেভিস

Answer 4

যেহেতু ng-showআমি মনে করি একটি কৌণিক বৈশিষ্ট্য তাই আমাদের মূল্যায়ন ফুল বন্ধনী ( {{}}) লাগানোর দরকার নেই ..

মত বৈশিষ্ট্য জন্য classআমাদের মূল্যায়ন ফুল বন্ধনী ( {{}}) সঙ্গে ভেরিয়েবল encapsulate প্রয়োজন ।

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 এর চারপাশে ces {}} বন্ধনীগুলি সরান কারণ কৌণিক নির্দেশাবলী কৌনিক নির্দেশাবলী ব্যবহার করা যায় না।

আরও জন্য: 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

আপনি যদি কোনও {{এক্সপ্রেশন of} এর স্থিতির উপর ভিত্তি করে কোনও উপাদান প্রদর্শন / আড়াল করতে চান তবে আপনি ব্যবহার করতে পারেন ng-switch :

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

অনুচ্ছেদ প্রদর্শিত হবে যখন foo.bar সত্য হয়, মিথ্যা হলে লুকানো থাকে।