एंगुलरजेएस पारस्परिक अनन्य तरीके से कई बटनों पर कक्षा लागू करता है

Question

मैं jQuery पृष्ठभूमि के साथ एंगुलरजेएस में नया हूं, और अभी भी कोणीय सोच में प्रवेश करने का प्रयास कर रहा हूं। मैं जैसे कई button रों है:

<button class="btn active">btn1</button> 
<button class="btn">btn2</button> 
... 
<button class="btn">btnN</button> 

jQuery साथ

मेरा लक्ष्य पूरा करने के लिए, कि केवल एक ही button समय पर activeclass के लिए मैं

करना होगा jQuery

$(".btn").on('click', function(){ 
$(this).siblings().removeClass('active') 
     .end() 
     .addClass('active'); 
}); 

है,

सीएसएस

.active{ ... } 

लेकिन मुझे एंगुलर में ऐसा करने के लिए सामान्य तरीका नहीं मिला। मुझे 3 बटनों का समाधान मिला, लेकिन यह अशिष्ट हो जाता है, खासकर अगर मेरे पास मेरे आवेदन में route है।

विशेष रूप से, अब समाधान मैं उपयोग कर रहा हूँ है:

मार्कअप

<li class="start" ng:click="selected = 1" ng-class="{active: selected == 1}"> 
<a href="#contenuti> </a> 
</li> 
<li class="start" ng:click="selected = 2" ng-class="{active: selected == 2}"> 
<a href="#utenti> </a> 
</li> 
<li class="start" ng:click="selected = 3" ng-class="{active: selected == 3}"> 
<a href="#messaggi> </a> 
</li> 

नियंत्रक में (बूटस्ट्रैप सेटिंग्स के लिए)

switch($location.path()){ 
case '/contenuti/plot': 
    $scope.selected = 1; 
    break; 
case '/utenti': 
    $scope.selected = 2; 
    break; 
case '/messaggi': 
    $scope.selected = 3; 
    break; 
} 

जो एक है समाधान जो मैं वास्तव में प्यार नहीं करता, मुझे नहीं लगता कि वास्तव में एक अच्छा समाधान है। मदद के लिए अग्रिम धन्यवाद।

jQuery समाधान फिडल: http://jsfiddle.net/HS4d6/

Answer 1

के बाद से अपने सभी बटन बहुत समान होने लगते हैं, तो आप ऐसा तरह एक एनजी-दोहराने इस्तेमाल कर सकते हैं:

:

<li data-ng-repeat="button in buttons" data-ng-class="{ active: button.url == location.path() }></li> 

और फिर अपने नियंत्रक इस होगा

function myController($scope....){ 
    $scope.location = $location; 

    $scope.buttons = [ 
     { url: '/contenuti/plot' }, 
     { url: '/utenti' }, 
     { url: '/messaggi' } 
    ]; 
} 

इस तरह से अधिक बटन जोड़ना और उन्हें स्वचालित रूप से काम करना आसान होगा। स्पष्ट रूप से अपनी जरूरतों के अनुसार संशोधित करें।

Answer 2

में आपका स्वागत है कोणीय दुनिया - यह jQuery से थोड़ा अलग है। लेकिन आप इसे प्यार करेंगे!

अंगुलर में बहुत सारी चीज़ें हैं, लेकिन उनमें से रानी directive है!

यहां समाधान का एक मचान है जो काफी सामान्य है और वर्तमान दायरे के बारे में चिंता किए बिना काम करता है। यह मूल रूप से इंटर-इंस्टेंस संचार के लिए निर्देश प्रारंभिक कार्य का उपयोग करता है। अगर आपको अपनी विशेष जरूरतों को विस्तारित करने में समस्याएं हैं तो बस मुझे चिल्लाओ।

app.directive('selectable', function(){ 

    var selected; 

    var unselect = function(element) { 
     element.removeClass('selected'); 
    } 

    var select = function(element) { 
     if (selected){ 
      unselect(selected); 
     } 
     selected = element; 
     element.addClass('selected'); 
    } 

    return { 

     link : function(scope, element, attrs){ 

      element.on('click', function(){ 
       select(element); 
      }); 

     } 
    } 
}); 

PLNKR