• AngularJS - Multiple "ui-sref" in single "ui-sref-active"


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

    I want to add class="active"

    to <li>


    Whenever you click on <a ui-sref="order/create"><span class="plus">+</span></a>

    , this time is class="active"

    added to <li>



    click <a ui-sref="order" class="main_link"><i class="fa fa-shopping-cart"></i>Order</a>

    to class="active"

    not add the time to <li>


    Your help will be appreciated.


    source to share

    2 answers


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


    <!DOCTYPE html>
    <html ng-app="plunker">
      <meta charset="utf-8" />
      <title>AngularJS Plunker</title>
        document.write('<base href="' + document.location + '" />');
      <link rel="stylesheet" href="style.css" />
      <script data-require="angular.js@1.2.x" 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>
    <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>                            


    /* Put your css in here */
    .heaader_active {
        background: red;

    More More More Here



    The implementation method is ui-router

    not possible. You cannot specify for which specific it ui-sref

    will be activated ui-sref-active

    . That being said, it should be easy to customize the template to wrap these links in such a way that you can have one ui-sref-active

    by one ui-sref

    . At least, it's easier to customize the behavior ui-router




    All Articles