AngularJS - Multiple 'ui-sref' in single 'ui-sref-active'

Question

AngularJS - Multiple 'ui-sref' in single 'ui-sref-active'

1.1k Views Asked by Dr.Tricker At 04 April 2025 at 18:59

HTML:

<!-- Order -->
<li ui-sref-active="active">
    <a ui-sref="order" class="main_link">
        <i class="fa fa-shopping-cart"></i>Order
    </a>
    <a ui-sref="order/create"><span class="plus">+</span></a>
    <div class="clearfix"></div>
</li>

I want to add class="active" on <li>.

Whenever click on <a ui-sref="order/create"><span class="plus">+</span></a> this, that time class="active" add on <li>.

BUT

click on <a ui-sref="order" class="main_link"><i class="fa fa-shopping-cart"></i>Order</a> that time class="active" not add on <li>.

Your help would be appreciated.

Original Q&A

There are 2 best solutions below

tomastrajan On 07 August 2015 at 13:20

The way the ui-router is currently implemented it is not possible to do that. You can't specify for which particular ui-sref the ui-sref-active will be activated. That being said, it should be easier to adjust your template to wrap those links in such a way that you can have one ui-sref-active per one ui-sref. At least easier than adjusting ui-router behaviour.

**Dr.Tricker** · Accepted Answer

app.js

var app = angular.module('plunker', ['ui.router']);

app.config([ '$stateProvider', '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/home/flow");
            $stateProvider.state("home", {
                url : '/home',
                templateUrl : 'home.html',
            }).state("contact", {
                url : '/contact',
                template : 'contact',
            });
        }]);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

index.html

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <li class="top" ui-sref-active="heaader_active">
    <a ui-sref="home"><i class="fa fa-cloud-upload"></i>&nbsp;Home</a>
        <a ui-sref="contact"><i class="fa fa-cloud-upload"></i>&nbsp;contact</a>                            
    </li>
  <ui-view/>
</body>

</html>

style.css

/* Put your css in here */

.heaader_active {
    background: red;
}

More Detail Check Here

AngularJS - Multiple 'ui-sref' in single 'ui-sref-active'

There are 2 best solutions below

Related Questions in HTML

Related Questions in ANGULARJS

Related Questions in ANGULAR-ROUTING

Related Questions in UI-SREF

Trending Questions

Popular # Hahtags

Popular Questions