एनजी-क्लिक का उपयोग करके कोणीयज में कक्षाएं जोड़ना और निकालना

Question 1

मैं काम करने की कोशिश कर रहा हूं कि ngClick के साथ एक क्लास कैसे जोड़ा जाए। मैंने अपना कोड plunker पर अपलोड किया है यहां क्लिक करें । कोणीय दस्तावेज़ीकरण को देखते हुए मैं सही तरीके से यह पता नहीं लगा सकता कि यह किया जाना चाहिए। नीचे मेरे कोड का एक स्निपेट दिया गया है। क्या कोई मुझे सही दिशा में मार्गदर्शन कर सकता है

 <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>

स्निपेट का विस्तार करें

यहाँ उदाहरण है jsFiddle पर काम करना

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

केवल निर्देशों के साथ ऐसा करने का एक सरल और साफ तरीका है।

<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

मैंने इसे प्राप्त करने के लिए ऊपर Zack Argyle के सुझाव का उपयोग किया, जो मुझे बहुत ही सुंदर लगता है:

सीएसएस:

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

HTML:

<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

मैं विश्वास नहीं कर सकता कि हर कोई इसे कितना जटिल बना रहा है। यह वास्तव में बहुत सरल है। बस इसे अपने html में पेस्ट करें (कोई निर्देश नहीं ।/controller आवश्यक परिवर्तन - "bg-info" एक बूटस्ट्रैप क्लास है):

<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

प्रतिक्रियात्मक रूपों के लिए -

HTML फ़ाइल

<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;
  }

स्निपेट का विस्तार करें