दिलचस्प पोस्ट
कैसे एक मूल तत्व मँडरा जब माता पिता तत्व शैली करने के लिए? Android पढ़ें ब्राउज़र का इतिहास आप हमेशा एक विशिष्ट शाखा से कैसे खींचें? स्ट्रटोक विभाजन की गलती जावास्क्रिप्ट सरणी को अल्पविराम से विभाजित सूची में बदलने का आसान तरीका? सी ++ 11 रैवल्यूज़ और स्थानांतरित सिमेंटिक्स भ्रम (रिटर्न स्टेटमेंट) कैसे PHP में websockets सर्वर बनाने के लिए पायथन urllib2, मूल HTTP प्रमाणीकरण, और tr.im बैकग्राउंड सर्विस से सेंडवेंट या अन्य तरह से छूने का तरीका कैसे अनुकरण करना है? उन वस्तुओं के क्रम के बावजूद समानता के लिए दो संग्रह की तुलना करना PHP में स्वचालित छवि प्रारूप पहचान WPF C # पथ: कोड में ज्यामिति को पथ डेटा के साथ स्ट्रिंग से कैसे प्राप्त करें (XAML में नहीं) मिश्रित शब्द-संख्या-संख्या स्ट्रिंग्स की मानवताबद्ध या प्राकृतिक संख्या छँटाई डीबी से कनेक्ट किए बिना mysql_real_escape_string के वैकल्पिक अंतर्राष्ट्रीयकरण जावास्क्रिप्ट में कैसे काम करता है?

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

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

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

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

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

 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> 

मैं 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> 

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

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

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

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

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

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

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

सीएसएस:

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

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

नियंत्रक

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

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

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