এনজি-ক্লিক ব্যবহার করে কৌনিক জেগুলিতে ক্লাস যুক্ত এবং অপসারণ করা

Question 1

আমি এনজি-ক্লিক দিয়ে কীভাবে একটি ক্লাস যুক্ত করব তা চেষ্টা করার চেষ্টা করছি। আমি আমার কোডটি প্লাঙ্কারে আপলোড করেছি এখানে ক্লিক করুন । কৌনিক ডকুমেন্টেশনের দিকে তাকিয়ে আমি ঠিক কীভাবে এটি করা উচিত তা বুঝতে পারি না। নীচে আমার কোড একটি স্নিপেট আছে। কেউ আমাকে সঠিক দিকে পরিচালিত করতে পারে?

 <div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"></div>

নিয়ামক

var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });

Question 2

আপনাকে কেবল নির্দেশকে "এনজি-ক্লাস" এর সাথে একটি ভেরিয়েবল বাঁধতে হবে এবং এটি নিয়ামক থেকে পরিবর্তন করতে হবে। এটি কীভাবে করা যায় তার একটি উদাহরণ এখানে দেওয়া হয়েছে:

var app = angular.module("ap",[]);

app.controller("con",function($scope){
  $scope.class = "red";
  $scope.changeClass = function(){
    if ($scope.class === "red")
      $scope.class = "blue";
    else
      $scope.class = "red";
  };
});

.red{
  color:red;
}

.blue{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ap" ng-controller="con">
  <div ng-class="class">{{class}}</div>
  <button ng-click="changeClass()">Change Class</button>    
</body>

স্নিপেট প্রসারিত করুন

এখানে jsFood উপর কাজ উদাহরণ

Question 3

আমি আমার কোডটিতে গতিশীলভাবে " " ক্লাস যুক্ত করতে বা অপসারণ করতে চাই , এখানে আমি কী করেছি।activeng-click

<ul ng-init="selectedTab = 'users'">
   <li ng-class="{'active':selectedTab === 'users'}" ng-click="selectedTab = 'users'"><a href="#users" >Users</a></li>
   <li ng-class="{'active':selectedTab === 'items'}" ng-click="selectedTab = 'items'"><a href="#items" >Items</a></li>
</ul>

Question 4

কেবল নির্দেশের সাহায্যে এটি করার একটি সহজ এবং পরিষ্কার উপায় রয়েছে way

<div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"></div>

Question 5

আপনি যদি পূর্ববর্তী ক্লাসটি সরিয়ে নতুন ক্লাস যুক্ত করতে চান তবে আপনি এটি একটি নির্দেশেও করতে পারেন

    .directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                if(element.attr("class") == "glyphicon glyphicon-pencil") {
                    element.removeClass("glyphicon glyphicon-pencil");
                    element.addClass(attrs.toggleClass);
                } else {
                    element.removeClass("glyphicon glyphicon-ok");
                    element.addClass("glyphicon glyphicon-pencil");
                }
            });
        }
    };
});

এবং আপনার টেমপ্লেটে:

<i class="glyphicon glyphicon-pencil" toggle-class="glyphicon glyphicon-ok"></i>

Question 6

আপনার ঠিক এটি আছে, আপনাকে যা করতে হবে তা হ'ল আপনার এনজি-ক্লিকে নির্বাচিত ইনডেক্স সেট করা আছে।

ng-click="selectedIndex = 1"

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

<div id="sidebar" ng-init="partial = 'main'">
    <div class="routeBtn" ng-class="{selected:partial=='main'}" ng-click="router('main')"><span>Main</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view1'}" ng-click="router('view1')"><span>Resume</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view2'}" ng-click="router('view2')"><span>Code</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view3'}" ng-click="router('view3')"><span>Game</span></div>
  </div>

এবং এটি আমার নিয়ামক মধ্যে।

$scope.router = function(endpoint) {
    $location.path("/" + ($scope.partial = endpoint));
};

Question 7

var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });

<div ng-show="isVisible" ng-class="{'active':isVisible}" class="block"></div>

স্নিপেট প্রসারিত করুন

Question 8

আমি এটি পেতে উপরে জ্যাক আরগিলের পরামর্শ ব্যবহার করেছি, যা আমি খুব মার্জিত বলে মনে করি:

সিএসএস:

.active {
    background-position: 0 -46px !important;
}

এইচটিএমএল:

<button ng-click="satisfaction = 'VeryHappy'" ng-class="{active:satisfaction == 'VeryHappy'}">
    <img src="images/VeryHappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Happy'" ng-class="{active:satisfaction == 'Happy'}">
    <img src="images/Happy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Indifferent'" ng-class="{active:satisfaction == 'Indifferent'}">
    <img src="images/Indifferent.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Unhappy'" ng-class="{active:satisfaction == 'Unhappy'}">
    <img src="images/Unhappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'VeryUnhappy'" ng-class="{active:satisfaction == 'VeryUnhappy'}">
    <img src="images/VeryUnhappy.png" style="height:24px;" />
</button>

Question 9

আপনি যদি ক্লাসগুলি যুক্ত করার এবং অপসারণের জন্য যুক্তিযুক্ত উদ্বেগকে আলাদা করতে পছন্দ করেন তবে এটি আপনি করতে পারেন

নিয়ামক

 (function() {
    angular.module('MyApp', []).controller('MyController', MyController);

    function MyController() {
      var vm = this;
      vm.tab = 0;

      vm.setTab = function(val) {
          vm.tab = val;
       };
      vm.toggleClass = function(val) {
          return val === vm.tab;
           };
        }
    })();

এইচটিএমএল

<div ng-app="MyApp">
  <ul class="" ng-controller="MyController as myCtrl">
    <li ng-click="myCtrl.setTab(0)" ng-class="{'highlighted':myCtrl.toggleClass(0)}">One</li>
    <li ng-click="myCtrl.setTab(1)" ng-class="{'highlighted':myCtrl.toggleClass(1)}">Two</li>
    <li ng-click="myCtrl.setTab(2)" ng-class="{'highlighted':myCtrl.toggleClass(2)}">Three</li>
   <li ng-click="myCtrl.setTab(3)" ng-class="{'highlighted':myCtrl.toggleClass(3)}">Four</li>
 </ul>

সিএসএস

.highlighted {
   background-color: green;
   color: white;
}

Question 10

প্রত্যেকে কীভাবে জটিল করে তুলছে তা আমি বিশ্বাস করতে পারি না। এটি আসলে খুব সহজ। কেবল এটি আপনার এইচটিএমএল এ পেস্ট করুন (কোনও নির্দেশনা নেই /

<div class="form-group col-md-12">
    <div ng-class="{'bg-info':     (!transport_type)}"    ng-click="transport_type=false">CARS</div>
    <div ng-class="{'bg-info': transport_type=='TRAINS'}" ng-click="transport_type='TRAINS'">TRAINS</div>
    <div ng-class="{'bg-info': transport_type=='PLANES'}" ng-click="transport_type='PLANES'">PLANES</div>
</div>

Question 11

প্রতিক্রিয়াশীল ফর্মগুলির জন্য -

এইচটিএমএল ফাইল

<div class="col-sm-2">
  <button type="button"  [class]= "btn_class"  id="b1" (click)="changeMe()">{{ btn_label }}</button>
</div>

স্নিপেট প্রসারিত করুন

টিএস ফাইল

changeMe() {
  switch (this.btn_label) {
    case 'Yes ': this.btn_label = 'Custom' ;
    this.btn_class = 'btn btn-danger btn-lg btn-block';
    break;
    case 'Custom': this.btn_label = ' No ' ;
    this.btn_class = 'btn btn-success btn-lg btn-block';
    break;
    case ' No ': this.btn_label = 'Yes ';
      this.btn_class = 'btn btn-primary btn-lg btn-block';
      break;
  }

স্নিপেট প্রসারিত করুন