Добавление или удаление классов на основе изменения маршрута в угловых

Question

У меня есть 3 маршрута, содержащие 3 формы. Я пытаюсь установить активный класс начальной загрузки на текущей вкладке, основываясь на текущем маршруте в angular. Я использовал модуль углового маршрута. Как я могу этого добиться. Я прилагаю код JS, пожалуйста, проверьте и помогите, пожалуйста

            angular.module('bankAppOnline',     ['ngSanitize','ngRoute','ngAnimate','ngQuantum'])
                .config(['$routeProvider',
                    function($routeProvider) {
                        $routeProvider.
                        when('/firststep', {
                            templateUrl: 'templates/firstformtemplate.html',
                            controller: 'firstformCtrl',
                            containerClass: 'active'

                        }).
                        when('/secondstep', {
                            templateUrl: 'templates/secondformtemplate.html',
                            controller: 'secondformCtrl',
                            containerClass: 'active'


                        }).
                        when('/thirdstep', {
                            templateUrl: 'templates/thirdformtemplate.html',
                            controller: 'thirdformCtrl',
                            containerClass: 'active'

                        }).
                        otherwise({
                            redirectTo: '/firststep'
                        });
                    }])
               .run(function($rootScope){

                $rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
                    console.log(event);
                    console.log(toState);
                    console.log(fromState);
                    console.log(toParams);
                    $rootScope.containerClass = toState.containerClass;
                });

            })
                .controller('Main-Ctrl',function($scope)
            {
                $scope.containerClass =  "active";
            })
                .controller('firstformCtrl', function ($scope, Customer) {

                   $scope.cities = ['Hyderabad','Vizag','Vijayawada','Bangalore','Delhi','Mumbai','Chennai','Noida','Pune','Tirupathi'];
                   $scope.professions = ['Doctor','Teacher','Engineer','Lawyer'];
                   $scope.customer = Customer.get();
                 $scope.reset = function() {


                    $scope.firstform.$setPristine();
                       var restore = {
                        "firstname": "",
                        "lastname": "",
                        "age": "",
                        "city": "",
                        "profession": "",
                        "mobile": ""
                    };
                    angular.extend($scope.customer, restore);

                }  
              })
              .controller('secondformCtrl', function ($scope, Customer) {
                  $scope.designations = ['ChairmanVice Chairman',
            'Chairman cum Managing Director',
            'Managing Director',
            'Sr. Vice president',
            'Vice President',
            'General Manager',
            'Joint General Manager',
            'Deputy General Manager',
            'Asst. General Manager',
            'Chief Manager',
            'Sr. Manager',
            'Manager',
            'Joint Manager',
            'Deputy Manager',
            'Asst. Manager',
            'Sr. Officer',
            'Officer',
            'Jr. Officer',
            'Sr. Associate',
            'Associate',
            'Jr. Associate',
            'Assistant' ];
                $scope.customer = Customer.get();
                 $scope.reset = function() {

                    $scope.secondform.$setPristine();
                         var restore = {
                        "pan":"",
                         "income":"",   
                         "company":"",
                         "designation":"",
                         "address":"",
                         "pin":""
                    };
                    angular.extend($scope.customer, restore);

                }  
              })
                .controller('thirdformCtrl', function ($scope,$http,Customer,$alert) {

                $scope.accounts = ['Savings','Basic checking','Interest-bearing','Market-Deposits','Certificates of deposit'];
                $scope.customer = Customer.get();
                  $scope.reset = function() {
                    $scope.thirdform.$setPristine();
                       var restore = {
                       "accountType":"" ,
                 "fdCheck":false,
                 "creditcardCheck":false
                    };
                    angular.extend($scope.customer, restore);

                };
                    $scope.sendPost = function() {
                       var data =  $scope.customer;
                        console.log($scope.customer);
                        $http.post("/users", data).success(function(data, status) {
                            $scope.status = status;

                                $alert('form saved successfully.','Oley!', 'success', 'top-right');

                            console.log($scope.status);
                        })
                            .error(function(response, status){
                                //$alert(options)
                                //for using more option create object
                                $alert({title:'Error', content:'An error occured',placement:'top-right',alertType:'danger'});
                            })
                    };

                })
              .factory('Customer', function () {
                var customer = {
                    "firstname": "",
                    "lastname": "",
                    "age": "",
                    "city": "",
                    "profession": "",
                    "mobile": "",
                    "accountType": "",
                    "fdCheck": false,
                    "creditcardCheck": false,
                    "pan": "",
                    "income": "",
                    "company": "",
                    "designation": "",
                    "address": "",
                    "pin": ""
                };

                return {
                  get: function () {
                    return customer;
                  }
                }
              });

Answer 1

Это может быть достигнуто с помощью ng-класса. Просто используйте $location в вашем контроллере. Этот пример довольно прост. Здесь мы добавляем активный класс в div, когда $location.path() равен '/'.

Затем мы устанавливаем условный ng-класс в нашем представлении, который добавляет активный класс.

Посмотреть

<div ng-class="{active: location === '/'}">
  <p>The parent DIV will have active class added when location path equals '/'</p>
</div>

контроллер

.controller('MainCtrl', function ($scope, $rootScope, $location) {
    $scope.location = $location.path();
    $rootScope.$on('$routeChangeSuccess', function() {
        $scope.location = $location.path();
    });
});

Answer 2

Поскольку вы отметили свой вопрос с помощью angular-ui-router, я предполагаю, что вы используете его.

Использование UI-маршрутизаторов ui-sref в сочетании с ui-sref-active позволит вам назначить класс для текущего активного состояния (или любых дочерних состояний).

Вот например. Если состояние - app.tab1 (или дочернее состояние), активный класс будет применен к элементу li.

<ul>
  <li ui-sref-active='active'>
    <a ui-sref="app.tab1">link</a>
  </li>
  <li ui-sref-active='active'>
    <a ui-sref="app.tab2">link</a>
  </li>
  <li ui-sref-active='active'>
    <a ui-sref="app.tab3">link</a>
  </li>
</ul>

См. http://angular-ui.github.io/ui-router/site/

Answer 3

Ты можешь использовать ng-class

Пожалуйста, прочитайте документацию

Answer 4

Это для новичков вроде меня:

HTML:

<script src="~/Content/src/angularjs/angular.min.js"></script>
<script src="~/Content/src/angularjs/angular-route.min.js"></script>

<ul>
  <li>
      <a ui-sref="Basics" href="#Basics" title="Basics" class="nav-link--link">Basics</a>
  </li>
</ul>

<div ng-app="myApp" ng-controller="MainCtrl">
  <div ng-view>

  </div>
</div>

Угловой:

//Create App
var app = angular.module("myApp", ["ngRoute"]);    

//Configure routes
app.config(function ($routeProvider) {
    $routeProvider
      .otherwise({ template: "<p>Coming soon</p>" })
      .when("/", {
        template: "<p>Coming soon</p>"
      })
      .when("/Basics", {
        templateUrl: "/content/views/Basic.html"
      });      
});    

//Controller 
app.controller('MainCtrl', function ($scope, $rootScope, $location) {
    $scope.location = $location.path();
    $rootScope.$on('$routeChangeSuccess', function () {
      navChanged();
    });
  });

  function navChanged() {
    setTimeout(function () {
      var links = angular.element(document.getElementsByClassName("nav-link--link"));
      var activeLink = null;
      for (var i = 0; i < links.length; i++) {
        var link = links[i]
        var linkElement = angular.element(link);
        linkElement.removeClass("active");
        var hash = location.hash.replace("#/", "#")
        if (link.hash && hash.split("#")[1] == link.hash.split("#")[1]) {
          activeLink = linkElement;
        }
      }
      activeLink.addClass("active");
    }, 100);
  };