要素の兄弟を取得する*角度*方法は何ですか？

Question

AngularJSを使用して要素の兄弟をクリックしたときに兄弟を取得する方法は何ですか？

は、これまでのところ、私はこれを持っている：

<div ng-controller="FooCtrl"> 
    <div ng-click="clicked()">One</div> 
    <div ng-click="clicked()">Two</div> 
    <div ng-click="clicked()">Three</div> 
</div> 

<script> 
    function FooCtrl($scope){ 
     $scope.clicked = function() 
     { 
      console.log("Clicked", this, arguments); 
     }; 
    } 
</script> 

ここで具体的な例として、jQueryの実装です：ここで

<div id="foo"> 
    <div>One</div> 
    <div>two</div> 
    <div>three</div> 
</div> 

<script> 
    $(function(){ 
     $('#foo div').on('click', function(){ 
      $(this).siblings('div').removeClass('clicked'); 
      $(this).addClass('clicked'); 
     }); 
    }); 
</script> 

Answer 1

あなたはDOMをトラバースしたい以来、ディレクティブを使用します。

app.directive('sibs', function() { 
    return { 
     link: function(scope, element, attrs) { 
      element.bind('click', function() { 
       element.parent().children().removeClass('clicked'); 
       element.addClass('clicked'); 
      }) 
     }, 
    } 
}); 

を

<div sibs>One</div> 
<div sibs>Two</div> 
<div sibs>Three</div> 

のjQueryが必要とされていないことに注意してください。

fiddle

Answer 2

は、あなたが提供するjQueryのサンプルの角度バージョンです：

HTML：

<div ng-controller="FooCtrl"> 
    <div ng-click="selected.item='One'" 
    ng-class="{clicked:selected.item=='One'}">One</div> 
    <div ng-click="selected.item='Two'" 
    ng-class="{clicked:selected.item=='Two'}">Two</div> 
    <div ng-click="selected.item='Three'" 
    ng-class="{clicked:selected.item=='Three'}">Three</div> 
</div> 

のJS：

function FooCtrl($scope, $rootScope) { 
    $scope.selected = { 
     item:"" 
    } 
} 

注：あなたは厳密にこのためにDOMにアクセスする必要がいけません。しかし、それでもやりたいのであれば、簡単な指示文を書くことができます。以下のような何か：

HTML：

<div ng-controller="FooCtrl"> 
    <div ng-click="clicked()" get-siblings>One</div> 
    <div ng-click="clicked()" get-siblings>Two</div> 
    <div ng-click="clicked()" get-siblings>Three</div> 
</div> 

JS：

yourApp.directive('getSiblings', function() { 
    return { 
     scope: true, 
     link: function(scope,element,attrs){ 
     scope.clicked = function() { 
      element.siblings('div').removeClass('clicked'); 
      element.addClass('clicked'); 
     } 
     } 
    } 
}); 

fiddle

Answer 3

後の角文法（jqLit​​eからの借入）で独占的に構築されたディレクティブです：

link: function(scope, iElement, iAttributes, controllers) { 
    var parentChildren, 
     mySiblings = []; 

    // add a marker to this element to distinguish it from its siblings 
    // this could be a lot more robust 
    iElement.attr('rsFindMySiblings', 'anchor'); 

    // get my parent's children, it will include me! 
    parentChildren = iElement.parent().children(); 

    // remove myself 
    scope.siblings = []; 
    for (var i=0; i < parentChildren.length; i++) { 
     var child = angular.element(parentChildren[i]); 
     var attr = child.attr('rsFindMySiblings'); 
     if (!attr) { 
     scope.siblings.push({name: child[0].textContent}); 
     } 
    } 
} 

注それは結果を格納するために、コントローラを使用していること。詳細な例については、plunkerを参照してください。