複数の状態でのui-sref-active

Question

ui-sref-activeを複数の状態で有効にします。これは私が持っているものです

あなたが見ることができるように、状態が第1であるときにはtest1がアクティブになり、状態が4であるときにはtest2がアクティブになります。しかし、私はtest1を2番目と3番目の状態でも有効にしたい。どうすればいいのですか？

Answer 1

私は、includedByStateフィルタを使用することをお勧めします。

<a ui-sref="first" ng-class="{active: ('first' | includedByState) || ('second' | includedByState) || ('third' | includedByState)}"> 
    <span>1</span> test1 
</a> 
<a ui-sref-active="active" ui-sref="fourth"> 
    <span>2</span> test2 
</a> 

これはいくつかのコードを生成しますが、あなたがしたいことを行います。

はまた、あなたのコンポーネントで関数を作成することができ、それはロジックを処理します。

//component function 
activateTest() { 
    return $filter('includedByState')('first') || 
    $filter('includedByState')('second') || 
    $filter('includedByState')('third'); 
} 

//html 
<a ui-sref="first" ng-class="{active: $ctrl.activateTest()}"> 
    <span>1</span> test1 
</a> 

これもトリックを行う必要があります。