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




angularjs-ng-click ng-class (6)

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

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

आपके पास यह बिल्कुल सही है, आपको बस अपने एनजी-क्लिक में चयनित इंडेक्स सेट करना है।

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

आपको केवल एक चर को "एनजी-क्लास" निर्देश में बांधना होगा और इसे नियंत्रक से बदलना होगा। यहां एक उदाहरण दिया गया है कि यह कैसे करें:

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 पर काम करने jsFiddle उदाहरण यहां दिया गया है


मैं ng-click पर गतिशील रूप से अपने कोड में " active " वर्ग को जोड़ना या निकालना चाहता हूं, यहां मैंने जो किया है।

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

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

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

यदि आप चिंताओं को अलग करना पसंद करते हैं जैसे कक्षाओं को जोड़ने और हटाने के लिए तर्क नियंत्रक पर होता है, तो आप यह कर सकते हैं

नियंत्रक

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

यदि आप पिछली कक्षा को हटाना चाहते हैं और एक नई कक्षा जोड़ना चाहते हैं तो आप इसे निर्देश में भी कर सकते हैं

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




ng-class