আমি কীভাবে একটি বুলিয়ান ভিত্তিতে অ্যাঙ্গুলারজেএস-এ এনজি-শো টগল করব?

Question

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

Answer 1

এনজি-ক্লিক ইভেন্টে আপনাকে কেবল "isReplyFormOpen" এর মান টগল করতে হবে

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

Comments

আমি ঠিক এটি ব্যবহার করছিলাম, তবে কোনও কারণে এনজি-ক্লিকের স্থানীয় বুলেটটি আমি নিয়ন্ত্রণকারী-সুযোগের মধ্যে ঘোষিত একটিকে "ওভাররাইডিং" করেছিলাম। আমি যদি কন্ট্রোলারের কোনও ফাংশনের মাধ্যমে টগল করি তবে সমস্যাটি অদৃশ্য হয়ে যাবে: এনজি-ক্লিক = "টগলবুলিয়ান ()"। কোন ধারণা কেন?

— এন্টোইন

আপনি কি নিয়ামক ডিফল্ট সঙ্গে বুলিয়ান মান সেট করেছেন? কন্ট্রোলার ফাংশনে $ স্কোপ.ইস.ReplyFormOpen = ফলস প্রথমবার সেট করুন। এবং চেষ্টা করুন।

— নিতু বানসাল

ওহ, আমি কন্ট্রোলারে বুলিয়ান সংজ্ঞায়িত করেছি। অদ্ভুত বিষয়টি হ'ল এই ডিফল্ট মানটি পৃষ্ঠা লোডে এনজি-শো দ্বারা সঠিকভাবে পড়েছিল, তবে তারপরে এনজি-ক্লিক ক্লিক করার পরে এটি কেবল এই এনজি-শো আপডেট করবে, এবং পৃষ্ঠাটির অন্যরাও নয় (সমস্ত একই বুলিয়ান দেখছেন) কমপক্ষে তত্ত্বে) ...

— এন্টোনাইন

এটি সমাধান। যেহেতু আমার এনজি-ক্লিকটি এনজি-রিপিটে বাসা বেঁধেছে তাই এটি এমন একটি স্কোপ তৈরি করেছে যা অভিভাবক বুলিয়ানকে লুকিয়ে রাখে যখন আপনি এর মান পরিবর্তন করার চেষ্টা করেন । স্ট্যাকওভারফ্লো . com/ প্রশ্নগুলি / 15388344/ … দেখুন । কৌণিক সেরা অনুশীলন অনুসারে, আপনাকে নির্দেশকে কেবলমাত্র পঠনযোগ্য হিসাবে বিবেচনা করতে হবে।

— এন্টোইন

আমি আপনার কৌশলটি এর সাথে ব্যবহার করব ng-class: <span ng-click="started=!started" ng-class="started ? 'btn-danger' : 'btn-success' ">+1। আপনাকে ধন্যবাদ:) ♥।

— ivahidmontazer

Answer 2

মূলত আমি এটা দ্বারা মীমাংসিত নয় -ing isReplyFormOpenমান যখনই ক্লিক করা হয়:

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

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

Comments

Is ng-initপ্রয়োজনীয়?

— চার্লি শ্লিয়েসার

@ চার্লি প্রয়োজনীয় নয়, isReplyFormOpen undefinedপ্রাথমিকভাবে এবং!undefined == true

— ই

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>

আরো বিস্তারিত জানার জন্য খুঁজে বার করো কৌণিক-ui ডকুমেন্টেশনে নেস্টেড যুক্তরাষ্ট্র ও নেস্টেড দেখেছে , একটি ভিডিও দেখা , বা পড়া বুঝতে সুযোগ ।

Comments

বুলিয়ানদের জন্য সেরা সমাধান

— maverickosama92

Answer 5

Ngclick & ng-if নির্দেশাবলী ব্যবহার করার জন্য এখানে একটি উদাহরণ।

দ্রষ্টব্য : সেই এনজি-যদি ডিওএম থেকে উপাদানটি সরিয়ে দেয় তবে এনজি-হাইড কেবলমাত্র উপাদানটির প্রদর্শন লুকায়।

<!-- <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 ('ড্যাশবোর্ড') কল করেছি দুটি ফাংশন আছে। এই ফাংশনটি মেনু টগল করতে ব্যবহৃত হবে এবং এটি নীচের কোডে ব্যাখ্যা করা হয়েছে। এনজি-ক্লাস = "{সক্রিয়: সক্রিয় ('/ গ্রাহককার / লেনদেন')} এটি বর্তমান মেনু আইটেমটিতে সক্রিয় একটি শ্রেণিকে যুক্ত করবে।

এখন আমি আমার অ্যাপে কিছু ফাংশন সংজ্ঞায়িত করেছি:

প্রথমে একটি নির্ভরতা $ রুটস্কোপ যুক্ত করুন যা ভেরিয়েবল এবং ফাংশন ডিক্লেয়ার করতে ব্যবহৃত হয়। Oot রুটস্কোপ সম্পর্কে আরও জানতে লিঙ্কটি দেখুন: https://docs.angularjs.org/api/ng/service/ $ রুটস্কোপ

আমার অ্যাপ্লিকেশন ফাইলটি এখানে:

 $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'
        })

আপনি যদি সাবমেনু ব্যতীত একটি একক মেনু পান তবেই আপনি আইসিএটিভ () ফাংশনটি ব্যবহার করতে পারেন। আপনি আপনার প্রয়োজন অনুসারে কোডটি সংশোধন করতে পারেন। আশা করি এটি সাহায্য করবে। দিন শুভ হোক :)